无痛升级到 Webpack 4 指南
Posted 阳阳在路上
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无痛升级到 Webpack 4 指南相关的知识，希望对你有一定的参考价值。
Webpack 4 = ~60-98% build time improvements over 3, needless to say looking forward to the update!
Webpack 4 编译速度提升60% - 98%, 并加入Split Cache功能. 对于这样的开发环境的升级, 也必须是痛并快乐着, 直接上干货!
升级步骤:
1. 升级 webpack 版本到最新版本
$ npm i -D webpack@next
2. 安装 webpack-cli 运行环境 (可根据项目需求选择安装在全局或者是本项目)
$ npm i -D webpack-cli
3. 在配置文件里, 将 module.loaders 替换为 module.rules
4. 在配置文件里添加 mode: 'production'/'develop' 字段, 并移除 Plugins 配置: webpack.DefinePlugin.
5. 移除 webpack.optimize.UglifyJsPlugin 配置, 使用 optimization.minimize 属性替代. 并安装最新版本插件:
$ npm i -D uglifyjs-webpack-plugin
6. 若使用Vuejs, 请升级最新 vue-loader 以兼容webpack 4
7. 若使用Typescript, 请升级 ts-loader 以兼容webpack 4
8. 若使用ES 6, 请升级 babel-loader 到最新版
9. 移除 optimaize.CommonsChunkPlugin 配置, 使用 optimization.minimize.splitChunk 属性替代.
10. ExtractTextWebpackPlugin 现在还不能兼容webpack 4, 请用 MinCssExtractPlugin 替换.
11. 升级file-loader和img-loader到最新版本.
12. html-webpack-plugin移除插件. 着陆页将由webpack 4自动启动.
错误信息搜集:
1. Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead. 该问题由 ExtractTextWebpackPlugin 插件不兼容导致, 请用第11步骤解决.
2. Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. 插件将不再支持, Code split代码配置改为optimization.minimize.splitChunk配置.
3. Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.该问题是因为UglifyJsPlugin插件已被移除, 请用第5步骤解决.
4. The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 该问题是因为配置更新问题引起, 请用第4步解决.
5. The CLI moved into a separate package: webpack-cli. 新版本环境使用全新的webpack 4 需要安装最新的webpack-cli, 请看步骤2.
6. Conflict: Multiple assets emit to the same filename x.js. 新版本webpack output配置需要更新, 改为[name].js.
7. Plugin/Preset files are not allowed to export objects, only functions. 请将balel相关插件升级到最新版
坑已填平, 请自取, 让你的代码编译飞起来! \-> <-/
警告: 因webpack 4现在还是最新版, 官方文档还没有更新... 没有更新... 没有更新... 插件支持和完善还需要三个月以后, 请不要立即用在生产环境上.
遇到任何与webpack 4相关报错或者未知问题都可以评论或私信参与讨论, 我们一起改进!
以上是关于无痛升级到 Webpack 4 指南的主要内容，如果未能解决你的问题，请参考以下文章