好文推薦
背景
沒啥背景，就閑，改著玩兒
參考文檔
版本對比
升級前：4.43.0
升級后：5.76.3
更新依賴
- 全局安裝第三方檢測包
npm install -g npm-check-updates
- 檢測需要升級的包
ncu
- 寫個node腳本做過濾處理
由于項(xiàng)目中依賴的包太多了，讓其幫我們一次性升級不可取，但是自己一個一個搞也麻煩，所以將ncu的輸出結(jié)果使用node腳本按行讀取匹配做替換處理
1-將ncu的結(jié)果保存為txt文件
2-在package.json中新建腳本命令
"diff":"node ./diff.js"
3-在根目錄新建對應(yīng)的diff.js文件執(zhí)行
const fs = require('fs');
const readline = require('readline')
const pkg = require('./package.json')
const rl = readline.createInterface({
input: fs.createReadStream('./update.txt'),
output: process.stdout,
terminal: false
});
rl.on('line', (line) => {
const arr = line.split(' ').filter(v=>v).filter(v=>v!=='→')
const [name,oldVersion,newVersion] = arr
for(let key in pkg){
if(key === 'dependencies' || key === 'devDependencies'){
for(let k in pkg[key]){
if(k.includes('webpack') && k === name && oldVersion === pkg[key][k]){
pkg[key][k] = newVersion
}
}
}
}
});
setTimeout(()=>{
fs.writeFileSync('./package.json',JSON.stringify(pkg),'utf-8')
},3000)
4-使用yarn重新安裝
yarn
參考文檔做語法替換
刪除optimization.splitChunks的相關(guān)配置
image.png
- 刪除output.name
image.png
- 替換.json文件的導(dǎo)入方式
image.png
- 修改node選項(xiàng)
image.png
1-修改前
image.png
2-將其替換如下
image.png
- 替換disableHostCheck:false為allowedHosts: 'all'
image.png
- 替換before為onBeforeSetupMiddleware
1-功能
與vue-devtools配合打開編輯器
2-文檔
image.png
- 將publicPath轉(zhuǎn)移到static下
image.png
- 將watchOptions的配置改為watchFiles
1-功能
監(jiān)聽文件自動刷新，4.x版本已經(jīng)廢棄了，watchFiles看著應(yīng)是替代項(xiàng)
2-文檔
image.png
- 刪除overlay
1-功能
image.png
2-在pkg.json的啟動script中傳入--client-overlay替代
- 將contentBase替換為static.directory
image.png
- 將clientLogLevel替換為client.logging
image.png
- 修改copy-webpack-plugin語法為下
image.png
- 刪除webpack.NamedModulesPlugin
image.png
- 刪除webpack.HashedModuleIdsPlugin
image.png
- 刪除cache-loader
image.png
運(yùn)行報(bào)錯修正
-- devtool
1-報(bào)錯
configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
BREAKING CHANGE since webpack 5: The devtool option is more strict.
Please strictly follow the order of the keywords in the pattern.
- configuration.node should be one of these
2-修改
原來
image.png
改為
image.png
- 添加nodeEnv
1-報(bào)錯
不設(shè)置的話，會與DefinePlugin插件沖突
WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
2-文檔
image.png
- Module not found
入口文件main.js此時會報(bào)一堆模塊引入的錯誤，但是對于.js模塊的引入則是正常的，故可能的問題是vue-loader版本或省略了.vue擴(kuò)展導(dǎo)致，我這里是后者
- Can't resolve 'url'
1-安裝三方補(bǔ)丁
yarn add node-polyfill-webpack-plugin
2-引入并作為plugin執(zhí)行
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
plugins:[
new NodePolyfillPlugin()
]
- 圖片無法正常顯示
我這里是因?yàn)閟tatic下的publicPath和directory這兩個屬性的值有問題
構(gòu)建速度前后比對
1-修改前
image.png
2-修改后
image.png
重要提示
緩存失效問題，一定要檢查其build目錄是否引入把一些易變文件作為了打包依賴
