webpack 3.1 升級webpack 4.0

風吹De麥浪發表於2019-06-24
Web

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。

相關文章