所谓打包多页面，就是同时打包出多个 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 举办相应的配置。