加入收藏 | 设为首页 | 会员中心 | 我要投稿 源码网 (https://www.900php.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 服务器 > 搭建环境 > Linux > 正文

webpack高级配置与优化详解

发布时间:2020-05-10 16:47:24 所属栏目:Linux 来源:站长网
导读:副标题#e# 所谓打包多页面,就是同时打包出多个 html 页面,打包多页面也是使用 html-webpack-plugin,只不过,在引入插件的时候是创建多个插件对象,因为一个html-webpack-plugin 插件对象只能打包出一个 html 页面。如: module.exports = { entry: { inde
副标题[/!--empirenews.page--]

所谓打包多页面,就是同时打包出多个 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 跨域问题

(编辑:源码网)

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

热点阅读