webpack高级配置与优化详解

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

module.exports = { watch: true, watchOptions: { poll: 1000, // 每隔一秒轮询一次文件是否发生变化 aggregateTimeout: 1000, // 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里 ignored: /node_modules/ // 排除一些文件的监听 } }

四、三个常见小插件的使用

1、clean-webpack-plugin: 其作用就是每次打包前先先将输出目录中的内容进行清空，然后再将打包输出的文件输出到输出目录中。

const {CleanWebpackPlugin} = require("clean-webpack-plugin"); module.exports = { plugins: [ new CleanWebpackPlugin() // 打包前清空输出目录 ] }

需要注意的是，require("clean-webpack-plugin)的结果是一个对象而不是类，这个对象中的 CleanWebpackPlugin 属性才是一个类，我们就是用这个类去创建插件对象。

2、copy-webpack-plugin: 其作用就是打包的时候带上一些 readMe.md、history.md 等等一起输出到输出目录中。

module.exports = { plugins: [ new CopyWebpackPlugin([ { from: "./readMe.md", // 将项目根目录下的readMe.md文件一起拷贝到输出目录中 to: "" // 属性值为空字符串则表示是输出目录 } ]) ] }

3、BannerPlugin: 其作用就是在打包输出的 js 文件的头部添加一些文字注释，比如版权说明等等，BannerPlugin 是 webpack 内置的插件，如:

module.exports = { plugins: [ new webpack.BannerPlugin("Copyright © 2019") // 在js文件头部添加版权说明 ] }

五、webpack 跨域问题

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!