记webpack3到webpack4的升级之路
记webpack3.0到webpack4.0的升级过程
前言:
由于管理后台webpack3.0每次打包需要切换到8.x.x版本的Node;这样切换来切换过去,实在忍受不了,趁着某个功能迭代的时机把webpack版本升级到4.0,同时记录升级过程中遇到的问题。
主要升级的俩个部分是:babel和webpack
babel(升级到babel7)
升级babel7的过程中,需要将babel的基本的包更新,原来babel6的依赖的包基本上都要舍弃掉
在升级babel7的过程中,有一些相关包名的变化;比如:
babel-core
=>@babel/core
;babel-preset-react
=>@babel/preset-react
preset-es20xx
弃用,改为@babel/preset-env
babel-preset-stage-0
=>@babel/preset-stage-0
babel配置迁移:
将babel的配置从package.json移入到babel.config.js文件中;
同时对可选链和空值的支持
1
2
3
4plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator',
]
webpack(升级到webpack4)
webpack升级主要是先将webpack版本升级,将对应的依赖的插件升级到webpack4的需要的版本和一些方法和属性的变化和新增。
webpack相关依赖版本升级
- webpack
v3.11.0
=> webpackv4.46.0
;引入依赖webpack-cliv3.3.12
- webpack-dev-server:
v2.5.0
=>v3.11.0
- html-webpack-plugin:
v2.29.0
=>v4.3.0
- 移除
CommonsChunkPlugin
,默认使用SplitChunksPlugin
分割代码 - 配置
mode
属性 - 移除
extract-text-webpack-plugin
,引入mini-css-extract-plugin
并配置css-loader
- 移除
happypack
,引入thread-loader
- 移除
uglifyjs-webpack-plugin
,引入terser-webpack-plugin
压缩js - react-dev-utils :
v3.0.2
=>v10.2.1
, createCompiler方法传参发生改变(传参变更为object) - webpackDevServer的
setup
方法被替换为before
和after
- 主题色配置采用
less-loader
的modifyVars
变量配置 - 支持svg图标的使用, 引入
@svgr/webpack
- 配置
optimization
字段- 引入
terser-webpack-plugin
压缩js - 引入
optimize-css-assets-webpack-plugin
压缩css - splitChunks 配置 将chunk的方式由
all
更改为async
,同时将多个css chunk合并成一个css文件,减少请求
- 引入
webpack4升级中的问题
问题1: 当升级依赖html-webpack-plugin版本的时候,遇到的问题:this.htmlWebpackPlugin.getHooks is not a function
解决方案:
1 | webpack3 => new InterpolateHtmlPlugin(env.raw), |
问题2:Cannot read property ‘tapPromise’ of undefined
解决方案:
升级add-asset-html-webpack-plugin
版本: v2.1.2
=> v3.1.3
问题3: Plugin could not be registered at ‘html-webpack-plugin-before-html-processing’. Hook was not found.
解决方案:
升级webpack
1
2
3
4webpack `v3.11.0` => webpack `v4.46.0`
引入依赖webpack-cli `v3.3.11`
webpack-dev-server: `v2.5.0 ` => `v3.7.2`
html-webpack-plugin: `v2.29.0` => `v4.3.0`InterpolateHtmlPlugin放在HtmlWebpackPlugin之后
1
2
3
4
5
6
7
8
9module.exports ={
//...
plugins:[
new HtmlWebpackPlugin({
//...
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw)
]
}
问题4: TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received undefined
解决方案: 升级webpack-manifest-plugin版本
问题5: asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).【配置静态文件大小限制】
解决方案:
1 | performance: { |
问题6: error:despite it was not able to fulfill desired ordering with these modules:
解决方案:
1 | new MiniCssExtractPlugin({ |
问题7: dev启动开发环境,识别不了css样式中的@符号
添加参数libraryDirectory:'es'
1 | { |
webpack4升级优化的点
引入thread-loader加快打包速度
1 | 例如: |
将chunk的方式由
all
更改为async
, 同时将多个css chunk合并成一个css文件,减少请求
1 | splitChunks: { |
支持svg引入
@svgr/webpack
1 | { |
优化体验
webpack3.0 打包构建时间
webpack4.0 打包构建时间 构建时间上加快了一分多钟
webpack3与webpack4开发依赖对比
1 | webpack "^3.11.0" |
1 | webpack "^4.46.0" |
总结
webpack3到webpack4的升级,主要做了以下这些事情
- 升级依赖:升级webpack版本 ,升级html-webpack-plugin版本等
- 代码分割:移除了CommonsChunkPlugin;引入SplitChunksPlugin,设置mode属性为production,optimization配置splitChunk拆分资源
- 压缩css:移除extract-text-webpack-plugin;引入mini-css-extract-plugin,使用mini-css-extract-plugin的loader重新配置less-loader和css-loader,配置svg
- 构建加速: 替换happypack为thread-loader,多线程式本地构建和生产构建
- 代码热更新:升级webpack-cli和webpack-dev-server,并且设置mode为development
参考
本文由 Abert 创作,采用 知识共享署名 4.0 国际许可协议。
本站文章除注明转载/出处外,均为本站原创或翻译,转载请务必署名。