webpack4 released 已经有一段时间了, 插件系统趋于平稳, 适逢对 webpack3 的打包速度很不满意, 因此决定将当前在做的项目进行升级, 正好也实践一下 webpack4.
新特性
0 配置
应该是 parcel 出来以后, webpack 团队意识到其配置确实有点复杂, 不太容易上手. so, webapck4 开始支持 0 配置启动. 不过, 万变不离其宗, webpack4 的 0 配置也只是支持了默认 entry 和 output 而已, 即默认 entry 为./src, 默认 output 为 / dist.
模式选择 mode
mode 有两个可选项, production & development. 作为必选项, mode 是不可缺省的. 在 production 模式下, 会默认做一些必要的优化, 如代码压缩和作用域提升, 还会默认指定 process.env.NODE_ENV 为 production. 在 development 模式下, 优化了增量构建, 支持注释和提示, 并且支持 eval 下的 source maps, 同时默认指定 process.env.NODE_ENV 为 development.
sideEffects
通过该配置可以大幅度减小打包体积. 当模块的 package.json 配置 sideEffects:false 表明该模块没有副作用, 也就意味着 webpack 可以安全地清除被用于重复导出 (re-exports) 的代码.
模块类型
webpack4 提供了 5 种模块类型.
json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
webassembly: WebAssembly 模块,(目前是 .wasm 文件的默认类型)
javascript/auto: (webpack 3 中的默认类型)支持所有的 JS 模块系统: CommonJS,AMD.
javascript/esm: EcmaScript 模块(默认 .mjs 文件).
javascript/dynamic: 仅支持 CommonJS & AMD.
JSON
webpack 4 不仅支持本地处理 JSON, 还支持对 JSON 的 Tree Shaking. 当使用 ESM 语法 import json 时, webpack 会消除掉 JSON Module 中未使用的导出. 此外, 如果要用 loader 转换 json 为 js, 需要设置 type 为 javascript/auto.
optimization
Webpack 4 删除了 CommonsChunkPlugin, 并默认启用了它的许多功能. 因此 webpack4 可以实现很好的默认优化. 但是, 对于那些需要自定义的缓存策略, 增加了 optimization.splitChunks 和 optimization.runtimeChunk. 具体解释可参考这篇文章, 解释得很详细. RIP CommonsChunkPlugin 点击预览
.
手把手升级
我是把原来 vue cli 的项目做了一下升级, 总体来说, 升级还算是比较顺利步骤, 这里我们分成两步走, 首先升级相关依赖的插件, 然后优化 webapck 配置文件.
升级插件
首先要把下面列表的插件升级到对应版本或者最新版本
webpack@4.4.1
CSS-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2
如果遇到其他包报错, 应该是升级到最新的就可以解决了.
更新配置文件
webpack.dev.conf.js
dev 环境变化不大, 毕竟 webpack4 很大一部分的优化都是针对生产环境的, 该文件我们只需要删除一些不再需要的插件既可以. 例如: webpack.NamedModulesPlugin,webpack.NoEmitOnErrorsPlugin, 其功能 webpack4 已经默认配置. 同时, 要设置
mode: 'development'
webpack.production.conf.js
webvpack4 中改动最大, 影响也最大的就是 webpack4 使用 optimization.splitChunks 替代了 CommonsChunkPlugin. 以前的 CommonsChunkPlugin 主要用来抽取代码中的共用部分, webpack runtime 之类的代码, 结合 chunkhash, 实现最好的缓存策略. 而 optimization.splitChunks 则实现了相同的功能, 并且配置更加灵活, 具体解释可参考这篇文章, 解释得很详细.
- mode: 'production',
- optimization: {
- splitChunks: {
- cacheGroups: {
- vendors: {
- test: /[\\/] node_modules[\\ / ] / ,
- chunks: 'initial',
- name: 'vendors',
- },
- 'async-vendors': {
- test: /[\\/] node_modules[\\ / ] / ,
- minChunks: 2,
- chunks: 'async',
- name: 'async-vendors'
- }
- }
- },
- runtimeChunk: {
- name: 'runtime'
- }
- }
总结
总体来说本次升级还算顺利, 不到一天搞定, 目前感觉, 打包速度大约优化了 70% 左右, 同时打包后的代码体积也有了很大的优化, 带来的效果很显著的.
来源: http://www.jb51.net/article/137704.htm