Vue項目升級webpack4.x和遇到的那些安裝包Error

• 升級後速度有明顯的提高
• webpack升級優化參考文章：webpack4.0打包優化策略、讓你的Webpack起飛—考拉會員後臺Webpack優化實戰
• 本文內容爲升級優化過程當中遇到的 Warning、 Error、及以上文章未講處處

升級前

webpack版本：3.6.0
五次打包所需時間：83.57s、78.71s、77.08s、78.07s、92.22s

升級後

五次打包所需時間：71.44s、37.54s、30.05s、30.50s、32.68s.

開始升級

一. 升級webpack到4.x

同時還需升級：

$ yarn add webpack
$ yarn add webpack-cli
$ yarn add webpack-dev-server
複製代碼

二.升級vue-loader

• 若是在yarn dev/yarn build時出現如下Error：

  Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
  複製代碼

  解決方法： 是vue版本與vue-template-compiler不一致。升級vue版本試試

• 將vue-loader引入webpack配置

  // 文件： wepack.base.conf.js 
  
  + const { VueLoaderPlugin } = require('vue-loader')
  
  + module.exports = {
  	....,
  	plugins:[
  		new VueLoaderPlugin()
  	]
  }
  複製代碼

三.使用mini-css-extract-plugin來提取css

// 文件：wepack.prod.conf.js
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin')

+ new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash:8].css'),
  chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
})
複製代碼

四.升級vue-router

因爲 vue-loader@13.0.0 版本中對模塊導入作了更新，爲了支持 Webpack3 中的 Scope Hoisting 屬性，esModule 被默認設置爲了 true，若是你以前用到require來導入*.vue文件，請注意：

const Foo = require('./Foo.vue')
// 須要改成
const Foo = require('./Foo.vue').default

// 或者直接使用
const Foo = import('./Foo.vue')
複製代碼

在低於 Vue 2.4 和 vue-router 2.7 的版本中，import 語法須要修改成：

const Foo = () => import('./Foo.vue')
// 須要改成
const Foo = () => import('./Foo.vue').then(m => m.default)
複製代碼

五.關於使用import('./Foo.vue')導入模塊所面臨的問題 【參考】

• 因爲webpack的import實現機制，會將其餘的.vue文件打包，致使開發環境的熱更新變的比較慢
• 因此要區分開發環境和生產環境。開發環境使用require，生產環境使用import

使用babel 的 plugins：babel-plugin-dynamic-import-node。它能夠將全部的import()轉化爲require()。

// 首先先安裝
yarn add cross-env babel-plugin-dynamic-import-node -D
複製代碼

cross-env包可以提供一個設置環境變量的scripts，能跨平臺地設置及使用環境變量。

• 在package.json中增長BABEL_ENV

  "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  複製代碼

• 在.babelrc文件中加入babel-plugin-dynamic-import-node

  {   
   "env": { 
     "development": {
       "plugins": ["dynamic-import-node"]
     }
   }
  }
  複製代碼

六.其餘關於依賴升級後遇到的問題

由autoprefixer版本引發的 warning

Module Warning (from ./node_modules/postcss-loader/lib/index.js):  
	(Emitted value instead of an instance of Error) autoprefixer: /xxx/xxx.vue:187:6: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
複製代碼

解決方法：

// 將樣式中像下面的寫法
/* autoprefixer: off */
....
/* autoprefixer: on */
// 改成
	
/* autoprefixer: ignore next */	
複製代碼

---

若是使用了script-ext-html-webpack-plugin，要注意與html-webpack-plugin的版本兼容

若是出現的異常以下：

(node:24424) UnhandledPromiseRejectionWarning: Error: Cyclic dependency 
	 
(node:24424) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:24424) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
複製代碼

這是循環依賴致使的。默認狀況下html-webpack-plugin的配置項chunksSortMode的值是auto，須要改成none

new HtmlWebpackPlugin({
     filename: '',
     template: 'index.html',
     inject: true,
     favicon: resolve('favicon.ico'),
     title: '',
     path: '',
     minify: {
     	  ...
     },
     chunksSortMode: 'none'
  }
)
複製代碼

可是修改後會出現問題： chunksSortMode決定你 chunks 的加載順序，若是設置爲none，你的 chunk 在頁面中加載的順序就不可以保證了，可能會出現樣式被覆蓋的狀況。好比在app.css裏面修改了一個第三方庫element-ui的樣式，經過加載順序的前後來覆蓋它，但因爲設置爲了none，打包出來的結果會變成下面這樣：

<link href="/newapp/static/css/app.48599466.css" rel="stylesheet">
<link href="/newapp/static/css/chunk-elementUI.6a2cdc9f.css" rel="stylesheet">
<link href="/newapp/static/css/chunk-libs.dc4401e2.css" rel="stylesheet">
複製代碼

app.css被先加載了，以前寫的樣式覆蓋就失效了 。

解決方法： chunksSortMode屬性去掉，升級html-webpack-plugin:"4.0.0-alpha"和script-ext-html-webpack-plugin:"2.0.1"

修改後若是出現如下異常：

/xxx/node_modules/script-ext-html-webpack-plugin/lib/plugin.js:50
      compilation.hooks.htmlWebpackPluginAlterAssetTags.tap(PLUGIN, alterAssetTags);
                                                        ^
TypeError: Cannot read property 'tap' of undefined
複製代碼

• 修改"html-webpack-plugin": "^4.0.0-alpha" => "4.0.0-alpha"
• 刪除 node_modules
• 刪除 package-lock.json
• npm install／yarn

參考文章：【1】、【2】