一录粱、背景
本次對(duì)公司項(xiàng)目進(jìn)行webpack的升級(jí) ， 原有版本是webpack4.42.1诊赊， 本次升級(jí)目標(biāo)是webpack5.28.0，已經(jīng)是很新的版本了府瞄。目標(biāo)碧磅，升級(jí)Webpack5，應(yīng)用長(zhǎng)效緩存遵馆，提升構(gòu)建速度鲸郊。
二、步驟
按照官網(wǎng)升級(jí)文檔
"vue-loader": "^15.9.6",
"terser-webpack-plugin": "^5.1.1",
"style-loader": "^2.0.0",
"mini-css-extract-plugin": "^1.4.0",
"less-loader": "^8.0.0",
"html-webpack-plugin": "^5.3.1",
"file-loader": "^6.2.0",
"css-loader": "^5.2.0",
"compression-webpack-plugin": "^7.1.2",
"babel-loader": "^8.2.2",
"postcss-loader": "^5.2.0",
原有運(yùn)行命令
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
wbepack4X版本使用webpack-dev-server货邓，啟動(dòng)方式為：webpack-dev-server秆撮。
webpack5X修改為：webpack server
webpack、webpack-cli换况、webpack-dev-server是需要版本匹配的
原有匹配版本
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
升級(jí)版本
"webpack": "^5.28.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
運(yùn)行報(bào)錯(cuò)：webpack.NamedModulesPlugin is not a constructor
原有配置文件
plugins: [
new webpack.NamedModulesPlugin(),
],
改成用配置的方式即可
optimization: {
namedModules: true
},
查看文檔發(fā)布 optimization.namedModules removed (NamedModulesPlugin too) 已經(jīng)被移除了职辨。
同時(shí)在 webpack4 上是默認(rèn)設(shè)置盗蟆，所以不需要設(shè)置這個(gè)選項(xiàng)即可。
webpack.HashedModuleIdsPlugin is not a constructor
報(bào)錯(cuò)去除
不兼容
報(bào)錯(cuò)棄用
new webpack.NamedModulesPlugin()
不兼容
報(bào)錯(cuò)棄用
new TerserPlugin(),
new HtmlWebpackPlugin({
chunksSortMode: 'dependency'
}),
報(bào)錯(cuò)拨匆，新版只支持 'none' | 'auto' | 'manual'
改為
new HtmlWebpackPlugin({
chunksSortMode: 'manual'
}),
webpack5已內(nèi)置
TerserPlugin去除
devServer去除了很多舊的配置項(xiàng)目
實(shí)際上出錯(cuò)信息已經(jīng)說(shuō)明了問(wèn)題原因：
Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
這一段的意思是webpack.config.js錯(cuò)誤姆涩，原因是這個(gè)配置文件的版本和我們當(dāng)前安裝的webpack的版本不匹配。
- configuration has an unknown property 'disableHostCheck'.
然后逐步排查惭每，去掉當(dāng)前安裝的webpack版本已經(jīng)去掉的配置項(xiàng)目骨饿。
mode: process.env.NODE_ENV || 'production',
必須配置mode
webpack5移除了node環(huán)境的polyfill
需要配置fallback
resolve: {
fallback: {
crypto: false
}
},
configuration.node不兼容
去除了node屬性
node: {}
增加屬性
optimization: {
chunkIds: "deterministic",
moduleIds: "deterministic",
mangleExports: "deterministic"
},
target: ['web', 'es5'],
// 5特有的文件監(jiān)聽(tīng)
watchOptions: {
//默認(rèn)為空，不監(jiān)聽(tīng)的?件或者?錄台腥，?持正則
ignored: /node_modules/,
//監(jiān)聽(tīng)到?件變化后宏赘，等300ms再去執(zhí)?，默認(rèn)300ms,
aggregateTimeout: 300,
poll: config.dev.poll,
},
// 5新增性能優(yōu)化
performance: {
maxEntrypointSize: 4000000, // 入口起點(diǎn)的最大體積黎侈，控制 webpack 何時(shí)生成性能提示
maxAssetSize: 1000000, //單個(gè)資源體積(單位: bytes)察署，控制 webpack 何時(shí)生成性能提示
},
file-loader和url-loader刪除
url-loader棄用， 使用 asset modules 代替
資源模塊類型(asset module type)峻汉，通過(guò)添加 4 種新的模塊類型贴汪，來(lái)替換所有這些 loader：
asset/resource 發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL。之前通過(guò)使用 file-loader 實(shí)現(xiàn)休吠。
asset/inline 導(dǎo)出一個(gè)資源的 data URI扳埂。之前通過(guò)使用 url-loader 實(shí)現(xiàn)。
asset/source 導(dǎo)出資源的源代碼瘤礁。之前通過(guò)使用 raw-loader 實(shí)現(xiàn)阳懂。
asset 在導(dǎo)出一個(gè) data URI 和發(fā)送一個(gè)單獨(dú)的文件之間自動(dòng)選擇。之前通過(guò)使用 url-loader柜思，并且配置資源體積限制實(shí)現(xiàn)岩调。
在項(xiàng)目中url-loader改用 type: 'asset/resource'的形式
當(dāng) webpack 配置中使用了 [hash] 占位符時(shí)，請(qǐng)考慮將它改為 [contenthash]赡盘。效果一致号枕，但事實(shí)證明會(huì)更為有效。
三陨享、總結(jié)
本次升級(jí)已經(jīng)完成葱淳，在性能上，Webpack5除了未修改重編譯霉咨，其他上表現(xiàn)并不如之前V4的性能好蛙紫。在未來(lái)的工作上拍屑，我會(huì)繼續(xù)關(guān)注這里性能為什么不如V4途戒。
下面的腳手架是基于@vue/cli 4.5.8 版本構(gòu)建，已將webpack3.6.0升級(jí)到5.28.0僵驰，可以直接下載使用喷斋。
喜歡的給個(gè)star吧
原文鏈接：https://jue.leheavengame.com/article/607301c844141670bcfad3c1
