vue升级webpack4.x
升级包
首先升级开发依赖中webpack构建流程中用到的loader
和plugin
以及它们的相关依赖升级到最新版本
yarn upgrade -L
安装包
webpack4.x
需要依赖webpack-cli
yarn add webpack-cli --dev
需要特别注意的依赖包extract-text-webpack-plugin
因为extract-text-webpack-plugin
的最新正式版还没有对webpack4.x进行支持,所以有两个选择,第一个是:yarn upgrade extract-text-webpack-plugin@next
升级到测试版,第二个是换成mini-css-extract-plugin
,作者在这采用的第一种方案。
修改配置文件
webpack4
内置了optimization.splitChunks、optimization.runtimeChunk
代替CommonsChunkPlugin
,
内置了optimization.noEmitOnErrors
代替NoEmitOnErrorsPlugin
;
内置了optimization.namedModules
代替NamedModulesPlugin
;
下面针对配置文件进行修改
修改开发环境webpack.dev.conf.js
增加设置mode
为development
,删除DefinePlugin
plugin中的环境变量设置,如果只用来设置环境变量,可以删除插件;
注释webpack.NamedModulesPlugin
、webpack.NoEmitOnErrorsPlugin
const devWebpackConfig = merge(baseWebpackConfig, {
mode: 'development',
// ....
plugins: {
// new webpack.NamedModulesPlugin(),
// new webpack.NoEmitOnErrorsPlugin(),
}
修改生产环境webpack.prod.conf.js
增加设置mode
为production
,optimization
配置;删除DefinePlugin
plugin中的环境变量设置,如果只用来设置环境变量,可以删除插件;
注释webpack.optimize.CommonsChunkPlugin
、uglifyjs-webpack-plugin
、webpack.optimize.ModuleConcatenationPlugin
;
如果npm run build
时报错Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css
,将contenthash
换成hash
即可
const webpackConfig = merge(baseWebpackConfig, {
mode: