所谓打包多页面，就是同时打包出多个 html 页面，打包多页面也是使用 html-webpack-plugin，只不过，在引入插件的时候是创建多个插件对象，因为一个html-webpack-plugin 插件对象只能打包出一个 html 页面。如:
module.exports = { entry: { index: "./src/index.js", // 指定打包输出的chunk名为index foo: "./src/foo.js" // 指定打包输出的chunk名为foo }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", // 要打包输出哪个文件，可以使用相对路径 filename: "index.html", // 打包输出后该html文件的名称 chunks: ["index"] // 数组元素为chunk名称，即entry属性值为对象的时候指定的名称，index页面只引入index.js }), new HtmlWebpackPlugin({ template: "./src/index.html", // 要打包输出哪个文件，可以使用相对路径 filename: "foo.html", // 打包输出后该html文件的名称 chunks: ["foo"] // 数组元素为chunk名称，即entry属性值为对象的时候指定的名称，foo页面只引入foo.js }), ] }
打包多页面时，关键在于 chunks 属性的配置，因为在没有配置 chunks 属性的情况下，打包输出的 index.html 和 foo.html 都会同时引入 index.js 和 foo.js。
所以必须配置 chunks 属性，来指定打包输出后的 html 文件中要引入的输出模块，数组的元素为 entry 属性值为对象的时候指定的 chunk 名，如上配置，才能实现，index.html 只引入 index.js，foo.html 只引入 foo.js 文件
二、配置 source-map
source-map 就是源码映射，主要是为了方便代码调试，因为我们打包上线后的代码会被压缩等处理，导致所有代码都被压缩成了一行，如果代码中出现错误，那么浏览器只会提示出错位置在第一行，这样我们无法真正知道出错地方在源码中的具体位置。webpack 提供了一个 devtool 属性来配置源码映射。
let foo = 1; console.lg(`console对象的方法名log写成了lg`); // 源文件第二行出错 index.js:1 Uncaught TypeError: console.lg is not a function at Object.<anonymous> (index.js:1) at o (index.js:1) at Object.<anonymous> (index.js:1) at o (index.js:1) at index.js:1 at index.js:1
源码中出错的位置明明是第二行代码，而浏览器中提示的错误确实在第一行，所以如果代码很复杂的情况下，我们就无法找到出错的具体位置
devtool 常见的有 6 种配置:
1、source-map: 这种模式会产生一个.map文件，出错了会提示具体的行和列，文件里面保留了打包后的文件与原始文件之间的映射关系，打包输出文件中会指向生成的.map文件，告诉js引擎源码在哪里，由于源码与.map文件分离，所以需要浏览器发送请求去获取.map文件,常用于生产环境，如:
//# sourceMappingURL=index.js.map
2、eval: 这种模式打包速度最快，不会生成.map文件，会使用eval将模块包裹，在末尾加入sourceURL，常用于开发环境，如:
//# sourceURL=webpack:///./src/index.js
3、eval-source-map: 每个 module 会通过 eval() 来执行，并且生成一个 DataUrl 形式的 SourceMap (即 base64 编码形式内嵌到 eval 语句末尾), 但是不会生成 .map 文件，可以减少网络请求*，但是打包文件会非常大*。
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvaW5kZXguanM/YjYzNSJdLCJuYW1lcyI6WyJmb28iLCJjb25zb2xlIiwibGciXSwibWFwcGluZ3MiOiJBQUFBLElBQUlBLEdBQUcsR0FBRyxDQUFWO0FBQ0FDLE9BQU8sQ0FBQ0MsRUFBUix1RSxDQUFxQyIsImZpbGUiOiIuL3NyYy9pbmRleC5qcy5qcyIsInNvdXJjZXNDb250ZW50IjpbImxldCBmb28gPSAxO1xuY29uc29sZS5sZyhgY29uc29sZeWvueixoeeahOaWueazleWQjWxvZ+WGmeaIkOS6hmxnYCk7IC8vIOa6kOaWh+S7tuesrOS6jOihjOWHuumUmVxuIl0sInNvdXJjZVJvb3QiOiIifQ== //# sourceURL=webpack-internal:///./src/index.js
4、cheap-source-map: 加上 cheap，就只会提示到第几行报错，少了列信息提示，同时不会对引入的库做映射，可以提高打包性能，但是会产生 .map 文件。
5、cheap-module-source-map: 和 cheap-source-map 相比，加上了 module，就会对引入的库做映射，并且也会产生 .map 文件，用于生产环境。
6、cheap-module-eval-source-map: 常用于开发环境，使用 cheap 模式可以大幅提高 souremap 生成的效率，加上 module 同时会对引入的库做映射，eval 提高打包构建速度，并且不会产生 .map 文件减少网络请求。
凡是带 eval 的模式都不能用于生产环境，因为其不会产生 .map 文件，会导致打包后的文件变得非常大。通常我们并不关心列信息，所以都会使用 cheap 模式，但是我们也还是需要对第三方库做映射，以便精准找到错误的位置。
三、watch 和 watchOptions 配置
webpack 可以监听文件变化，当它们修改后会重新编译，如果需要开启该功能，那么需要将 watch 设置为 true，具体监听配置通过 watchOptions 进行相应的设置。