- 升级后速度有明显的提升
- 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
由于 [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" 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