- 升級後速度有明顯的提高
- webpack升級優化參考文章:webpack4.0打包優化策略、讓你的Webpack起飛—考拉會員後臺Webpack優化實戰
- 本文內容爲升級優化過程當中遇到的 Warning、 Error、及以上文章未講處處
webpack版本:3.6.0
五次打包所需時間:83.57s、78.71s、77.08s、78.07s、92.22scss
五次打包所需時間:71.44s、37.54s、30.05s、30.50s、32.68s.html
同時還需升級:vue
$ yarn add webpack
$ yarn add webpack-cli
$ yarn add webpack-dev-server
複製代碼
若是在yarn dev/yarn build
時出現如下Error:node
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版本試試webpack
將vue-loader引入webpack配置git
// 文件: 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-loader@13.0.0 版本中對模塊導入作了更新,爲了支持 Webpack3 中的 Scope Hoisting 屬性,esModule 被默認設置爲了 true,若是你以前用到require來導入*.vue文件,請注意:github
const Foo = require('./Foo.vue')
// 須要改成
const Foo = require('./Foo.vue').default
// 或者直接使用
const Foo = import('./Foo.vue')
複製代碼
在低於 Vue 2.4 和 vue-router 2.7 的版本中,import 語法須要修改成:web
const Foo = () => import('./Foo.vue')
// 須要改成
const Foo = () => import('./Foo.vue').then(m => m.default)
複製代碼
import('./Foo.vue')
導入模塊所面臨的問題 【參考】require
,生產環境使用import
// 首先先安裝
yarn add cross-env babel-plugin-dynamic-import-node -D
複製代碼
cross-env
包可以提供一個設置環境變量的scripts,能跨平臺地設置及使用環境變量。vue-router
在package.json
中增長BABEL_ENV
npm
"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
版本引發的 warningModule 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
複製代碼