vue cli升級webapck4總結

如果遇到其他包報錯，應該是升級到最新的就可以解決了。

更新配置文件

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%左右，同時打包后的代碼體積也有了很大的優化，帶來的效果很顯著的。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com