Vue-CLI2專案從 babel 6 + webpack 3.x 升級到 babel7 + webpack4.x 踩坑

hhh1991發表於2019-04-19

序言

當前專案是通過當時Vue-CLI 2.x生成使用，配置是babel 6編譯、webpack 3.x打包。由於專案發展到某個階段，需要升級優化。目標是打包速度更快、bundle體積更小。
本文通過分享程式碼片段講述部分版本升級後的不同以及可能發生的報錯案例，達到讓小夥伴們能找到對應的解決辦法，減少升級版本的恐懼感。

正文

第一部分 Webpack

1. mode 模式

通過配置 mode，可選 production生產環境和 development 開發環境。

2. 基本配置

移除 loaders，使用 rules 代替

// webpack.base.config.js
module: {
-    loaders: {}
+    rules: {}
}
複製程式碼

外掛 CommonsChunkPlugin 替換成配置 optimization.splitChunks 和 optimization.runtimeChunk
參考：webpack.js.org/plugins/spl…
原 webpack 3 CommonsChunkPlugin外掛：

 
 new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     minChunks: 2
 }),
 // webpack 相關程式碼打包到一個檔案
 // 新模組加入給新模組加一個id
 // 規避長快取問題
 new webpack.optimize.CommonsChunkPlugin({
     name: 'runtime'
 })
複製程式碼

現 webpack 4 替代者 splitChunks & runtimeChunk：

optimization: {
    splitChunks: {
        cacheGroups: {
            vendor: {
                name: 'vendor',
                minChunks: 2
                // 可選 'initial | async | all'，
                // 分別代表，初始化時載入、非同步載入、兩者皆使用
                chunks: 'all'  
                // 代表權重值，值越大，打包優先順序越高
                priority: 10 
            }
        }
    },
    runtimeChunk: {
        name: 'runtime'
    }
}
複製程式碼

3. 生產環境 `production`

生產環境下簡化配置，預設開啟外掛 UglifyJsPlugin

// webpack.prod.config.js 
module.exports = { 
+ mode: 'production', 
- plugins: [ 
-   new UglifyJsPlugin(/* ... */), 
-   new webpack.DefinePlugin({ 
-       "process.env.NODE_ENV": JSON.stringify("production") }), 
-   new webpack.optimize.ModuleConcatenationPlugin(), 
-   new webpack.NoEmitOnErrorsPlugin()
- ]
}
複製程式碼

當然，生產環境依然可以通過配置關閉 UglifyJsPlugin

optimization: {
    minimize: false
}
複製程式碼

4. 開發環境 `development`

devServer
webpack3 需要手寫 dev-server.js
webpack4 使用webpack配置

// webpack.dev.config.js
devServer: {
    open: true,              // 自動開啟瀏覽器頁面
    host: 'xxx.xxx.com',     // host
    openPage: 'xxx'          // 路徑
    historyApiFallback: true // 啟用 history模式
    proxy: 'xxx'             // 代理配置  
}
複製程式碼

5. `package.json`

由於開發環境的devServer使用方式有變化，所以 package.json 的 scripts 也需要修改，否則會報如下錯誤：
ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\workspace'
正確修改配置：

// package.json
{
    "scripts": {
-        "dev": "node build/dev-server.js",
+        "dev": "webpack-dev-server --config build/webpack.dev.config.js"        
    }
}
複製程式碼

5. 外掛安裝/升級

如果小夥伴正在使用以下外掛，請按詳情變更使用，並且可能出現報錯解決：

vue-loader v15
thread-loader
eslint-loader v5
copy-webpack-plugin
html-webpack-plugin v4
mini-csss-extract-plugin 替代 extract-text-webpack-plugin
script-text-html-webpack-plugin 廢棄

詳細：

vue-loader v15
① 從 v14 遷移

// webpack.base.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
    plugins: [
        new VueLoaderPlugin()
    ]
}
複製程式碼

thread-loader
本來打算使用 HappyPack ，可是vue-loader@15 不完全支援 HappyPack。
現在這個Issue已經關閉，所以小夥伴可以繼續嘗試用 HappyPack 進行優化，記得反饋哦。
eslint-loader v5
如有eslint報錯如下：
cannot read property 'eslint' of undefined
新增配置：
```
plugins: [
    new webpack.LoaderOptionsPlugin({ options: {} })
]
複製程式碼
```
如有警告如下：
[ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning. The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead
修改配置：
```
// .eslintrc.js
parserOptions: {
    parse: 'babel-eslint',
    ecmaVersion: 8,
-   ecmaFeatures: {
-       experimentalObjectRestSpread: true
-   }
}
複製程式碼
```
copy-webpack-plugin
如有報錯如下： TypeError: compilation.contextDependencies.push is not a function 升級外掛
```
npm i copy-webpack-plugin@latest -D
複製程式碼
```

html-webpack-plugin v4 如果小夥伴使用 html-webpack-plugin 提供的鉤子擴充套件了自己定義的外掛，可能會發生以下錯誤：
① Plugin could not be registered at 'html-webpack-plugin-before-html-generation'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'.
② TypeError: callback is not a function
③ this.htmlWebpackPlugin.getHooks is not a function
原因：這三者都是因為升級版本或者使用hooks的方式改變了而導致。
參考：
www.npmjs.com/package/htm…
github.com/jantimon/ht…
解決：

//plugin.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
class MyPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      console.log('The compiler is starting a new compilation...')
 
      // Staic Plugin interface |compilation |HOOK NAME | register listener 
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        'MyPlugin', // <-- Set a meaningful name here for stacktraces
        (data, cb) => {
          // Manipulate the content
          data.html += 'The Magic Footer'
          // Tell webpack to move on
          cb(null, data)
        }
      )
    })
  }
}
 
module.exports = MyPlugin
複製程式碼

mini-csss-extract-plugin
這是在我們的專案升級過程中，最容易出現問題的外掛。
① 修改Vue-CLI 2 生成關於處理樣式的 utils.js
如下：
```
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
// 找到:
- if (options.extract) { 
- //options.extract = NODE_ENV === 'production'
-    return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-    })
- } else {
-    return ['vue-style-lodaer'].concat(loaders))
- }

+ return [options.extract ? 
+    MiniCssExtractPlugin.loader : 
+    'vue-style-loader'
+ ].concat(loaders)
複製程式碼
```
② 報錯：document is not defined
解決：區分環境使用 mini-css-extract-plugin（production）和 vue-style-loader（development），如 ① 配置即可

③ 報錯：cannot read property pop of undefined
原因：是webpack optimize時候產生的，小編也一知半解，不好解釋。
參考：
1. github.com/webpack-con…
2. github.com/webpack-con…
④ 警告：[mini-css-extract-plugin] Conflicting order between
原因：不同CSS模組裡，引入同一個CSS，而引入的順序不一樣產生的警告。
參考：github.com/webpack-con…
解決：遮蔽警告
```
// 安裝依賴
npm i -D webpack-filter-warnings-plugin

// 配置外掛
plugins: {
    new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
    })
}
複製程式碼
```
⑤ 疑惑：打包後，產生很多小的css檔案，能不能把他們都打包成一個css檔案
原因：vue-loader@15 會把 <style lang="less"> 當作 *.less
參考：vue-loader.vuejs.org/zh/migratin…
解決：棄用 mini-css-extract-plugin，重用 extract-text-webpack-plugin 並升級版本。且把utils.js的配置如原來升級前。
```
npm i -D extract-text-webpack-plugin@next
複製程式碼
```
但是，這裡可能會產生報錯，如下： Error: Path variable [contenthash:8] not implemented in this context: [name]_[contenthash:8].css
原因：外掛的臨時版本@next並不支援contenthash，而且現在這款外掛已經不更新了，所以，最好還是使用 mini-css-extract-plugin。
參考：github.com/webpack-con…
解決：
```
plugins: [
    new ExtractTextPlugun({
 -       filename: '[name].[contenthash:8].css'
 +       filename: '[md5:contenthash:hex:20]'
    }})
]
複製程式碼
```
script-text-html-webpack-plugin
原因：外掛暫不支援 webpack4，將會在 v2版實現
解決：使用preload-webpack-plugin

6. 其他警告或報錯

You may need an appropriate loader to handle this file type
原因：package.json 裡安裝依賴變化了，但是由於 package-lock.json 存在。
解決辦法：
全域性配置一勞永逸：
```
npm config set package-lock false
複製程式碼
```
解決當前專案：
刪除 package-lock.json、node_modules，重新執行命令 npm install
__webpack_hmr 404 not found
原因：webpack 配置 entry 陣列裡面有 build/dev-client 的配置
解決：刪除這個配置即可
部分檔案內作用域 this = undefined
原因：不明
解決：this 改為 window
warn: entrypoint = undefined
解決：不用理會

第二部分 Babel

1. 版本升級

# 不安裝到本地而是直接執行命令，npm 的新功能
npx babel-upgrade --write

# 或者常規方式
npm i babel-upgrade -g
babel-upgrade --write

# 更新 babel 配置 並且 安裝依賴
npx babel-upgrade --write --install
複製程式碼

2. 配置檔案

這裡區分需不需要編譯 node_modules 裡面的依賴。
如果需要，刪除專案根目錄下 .babelrc 改為使用 babel.config.js

3. polyfill

推薦使用 @babel/preset-env 並按需引入 polyfill
babel 7: @babel/polyfill
babel 6: babel-polyfill

Promise等ES6語法，在 Android 4.4以下和 IE 的相容問題

// node 環境
require('@babel/polyfill')

// ES6 main.js
import('@babel/polyfill')

// webpack.base.config.js
entry: ['@babel/polyfill', 'main.js']
複製程式碼

Vue 專案升級到 webpack4.x 小紀【附程式碼】
2018-08-14
VueWeb
babel 升級 7.X 踩坑記錄
2019-01-29
Babel
Hexo6 升級踩坑指南
2024-03-21
Hexo
Vue1.0+Webpack1+Gulp專案升級構建方案的踩坑路
2019-04-04
VueWeb
Webpack + gulp + babel-loader 配置踩坑
2019-03-01
WebBabel
【Vue】Vue1.0+Webpack1+Gulp專案升級構建方案的踩坑路
2019-04-04
VueWeb
Vue專案升級webpack4.x和遇到的那些安裝包Error
2019-03-11
VueWebError
如何將webpack2專案升級到webpack3
2017-06-20
Web
# Laravel 5.5 升級到 6.0 踩坑記錄
2019-10-13
Laravel
【譯】如何從頭開始搭建React,Webpack4,Babel7工程
2019-03-03
ReactWebBabel
antd 3.x升4.x踩坑之路～
2023-01-31
maatwebsite/excel匯入從2.1升級到3.x
2021-10-26
WebExcel
前端專案框架搭建隨筆---Webpack踩坑記
2018-08-23
前端框架Web
Istio 升級後踩的坑
2023-02-20
jQuery升級踩的那些坑
2016-01-13
jQuery
django專案部署到centos，踩的坑
2021-07-11
DjangoCentOS
webpack4升級採坑
2018-08-01
Web
Vue專案從webpack3.x升級webpack4不完全指南
2019-04-28
VueWeb
基於webpack4.x專案實戰
2019-03-03
Web
RxJava1 升級到 RxJava2 所踩過的坑
2017-03-19
RxJava
async語法升級踩坑小記
2018-09-28
Vue.js 升級踩坑小記
2017-11-27
Vue.js
老vue專案webpack3升級到webpack5全過程記錄(一)
2021-05-20
VueWeb
vue-cli專案升級webpack4
2019-08-09
VueWeb
如何從Angular 5 App升級到Angular 6
2018-09-02
AngularAPP
vue-cli + es6 + axios專案踩坑
2018-03-20
VueiOS
webpack 4 ：從0配置到專案搭建
2018-07-05
Web
【填坑】vue+webpack 升級後在原有專案上的適配問題
2017-11-23
VueWeb
AndroidStudio升級3.x之後太坑了
2019-03-03
Android
從零開始使用webpack 4, Babel 7建立一個React專案
2018-11-18
WebBabelReact
vuePC專案踩坑記錄
2019-05-20
Vue
React專案踩坑記錄
2019-04-11
React
webpack：從入門到真實專案配置
2017-09-17
Web
Webpack + Vue 多頁面專案升級 Webpack 4 以及打包優化
2019-02-16
WebVue優化
vue-cli#webpack3.0 升級到webpack4.6
2018-04-27
VueWeb
Webpack的踩坑與彙總
2018-08-31
Web
pwa+webpack，初探與踩坑
2018-05-20
Web
【踩坑記】從HybridApp到ReactNative
2016-09-28
APPReact