webpack 3.1 升級webpack 4.0

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等等優化手段
• 等等

一般上面的報錯很容易找到解決方案

碰到的問題

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

一般這是由於以前babel 卸載的不完整致使的，先把babel 相關的插件全都卸載，而後在安裝新版本的插件。

二、在路由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"] } } }

三、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" ]

四、webpack 最好是看官網，webpakc 中文網並無徹底同步過來。

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

效果

不少loader、插件都升級到了最新版，在未升級以前發一次測試環境要7分鐘以上。升級以後發一次測試環境大概2分鐘到3分鐘左右。此次升級主要仍是爲了vue3.0，哈哈。但願趕忙來吧vue3.0。

原文出處：https://www.cnblogs.com/CandyManPing/p/11075042.html