error package_Vue項目更新webpack4.x和遇到的那些安裝包Error

1、更新後速度有明顯的提升

2、webpack更新優化參考文章：webpack4.0打包優化政策、讓你的Webpack起飛—考拉會員背景Webpack優化實戰

3、本文内容為更新優化過程中遇到的

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

由于 [email protected] 版本中對子產品導入做了更新，為了支援 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" target="_blank" rel="external nofollow"  rel="stylesheet">
<link href="/newapp/static/css/chunk-elementUI.6a2cdc9f.css" target="_blank" rel="external nofollow"  rel="stylesheet">
<link href="/newapp/static/css/chunk-libs.dc4401e2.css" target="_blank" rel="external nofollow"  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】