webpack 3.1 升級webpack 4.0

?為了提升打包速度以及跟上主流技術步伐，前段時間把項目的webpack 升級到4.0版本以上

webpack 官網：https://webpack.js.org/

正常操作升級webpack

• 檢查node、npm 版本，該升級的升級
• 卸載webpack 舊版本，安裝最新穩定版本 wepack、webpack cli
• 遇到loader 報錯，升級各種loader，其中vue-loader 參考vue loader 官網說明
• ?刪除?ExtractTextPlugin插件，改用 MiniCssExtractPlugin
• 配置各個環境的mode
• 升級好之后繼續優化，比如 gzip、happlyPack、dllplugin等等優化手段
• 等等

通常上面的報錯很容易找到解決方案

碰到的問題

1、安裝了babel 最新版，但是一直提示加載的是之前的版本，babel 一直報錯

通常這是因為之前babel 卸載的不完整導致的，先把babel 相關的插件全都卸載，然后在安裝新版本的插件。

2、在路由index中提示組件加載失敗或者提示路由動態加載模塊失敗

dynamic-import-webpack

完整babel 配置如下

{"presets": ["@babel/preset-env"],// "presets": [// ["env", {// "modules": false,// "useBuiltIns": "entry"// }],// "@babel/preset-env"// ],"plugins": [["@babel/plugin-transform-runtime",{"absoluteRuntime": false,"corejs": false,"helpers": true,"regenerator": true,"useESModules": false}],"@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-object-rest-spread","transform-vue-jsx","dynamic-import-webpack",["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]],"env": {"test": {"presets": ["env", "stage-2"],"plugins": ["istanbul"]}} }

3、Babel 7+使用babel-plugin-transform-vue-jsx報錯的解決方法?

"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-object-rest-spread","transform-vue-jsx" ]

4、webpack 最好是看官網，webpakc 中文網并沒有完全同步過來。

5、最新的babel 插件都是在@babel/ 名稱空間下

效果

很多loader、插件都升級到了最新版，在未升級之前發一次測試環境要7分鐘以上。升級之后發一次測試環境大概2分鐘到3分鐘左右。這次升級主要還是為了vue3.0，哈哈。希望趕緊來吧vue3.0。

轉載于:https://www.cnblogs.com/CandyManPing/p/11075042.html

總結

以上是生活随笔為你收集整理的webpack 3.1 升级webpack 4.0的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。