1. 背景

我不是为了做单页面应用，而是仅仅是编写多个HTML页面。

那么为啥我要用webpack打包呢？

1、使用webpack编译scss

2、使用devServer，不用手动刷新

3、编译打包js，并利用babel转换es6...

但是一般情况下，我们都是单入口，也即编译一个HTML入口，那么调整多个入口呢？

2. 方法

1、首先我们应该为HTML建立对应的js入口文件，比如我这里：main.js（对应index.html），mainMobile.js（对应mobile.html）

2、webpack.config.js里面：

A. 多个入口和出口

entry: {
    index: path.resolve(__dirname, 'main.js'),
    mobile: path.resolve(__dirname, 'mainMobile.js')
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].misiai.js",
    chunkFilename: "[name].chunk.js"
},

B. 配置多个htmlWebpackPlugin

new htmlWebpackPlugin({
    template: path.resolve(__dirname, "src/template", "index.html"),
    chunks: ['index'],
    filename: "index.html",
}),
new htmlWebpackPlugin({
    template: path.resolve(__dirname, "src/template", "mobile.html"),
    chunks: ['mobile'],
    filename: "mobile.html",
}),

然后devServer还是打包都正常啦！！！