vue-cli脚手架出到了4.3.1版本，目前主推通过create命令来新建项目。与过去的vue-cli2的init命令不同的是：create命令脚手架建完的项目webpack为4，而init采用的模板中引用的webpack版本还是3。（单独安装最新的@vue/cli-init命令安装的webpack版本也是3）
为了解决构建效率和最新插件兼容性的问题，本篇文章记一下怎样把最开始通过init命令建的webpack3的项目升级为webpack4。
升级依赖
为了避免手动编辑package.json文件产生包依赖出错的问题，我们通过uninstall和install来更新包。首先更新webpack，打开项目的package.json文件，webpack包是在devDependencies开发依赖中的，所以可以通过如下命令来更新：
npm uninstall webpack
npm install webpack --save-dev
复制代码
同样方法，需要在开发依赖中更新webpack-dev-server、webpack-cli、vue-loader、eslint-loader、html-webpack-plugin、eslint、eslint-plugin-vue。
调整 webpack.base.conf.js
Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用，这部分不管调试还是线上构建都是需要的，所以在base配置文件中调整：
//webpack.dev.conf.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}
复制代码
调整 webpack.dev.conf.js
首先在合并配置的地方引入mode：
//webpack.dev.conf.js
...
// 开发环境引入
mode: 'development',
...
module: {
...
}
devServer: {
...
}
复制代码
接着, 以下插件被废弃掉了,直接注释掉
– webpack.DefinePlugin
– webpack.NamedModulesPlugin
– webpack.NoEmitOnErrorsPlugin
复制代码
调整 webpack.prod.conf.js
同dev的配置，prod也要添加 mode:production，这里就不再赘述了。
接着需要在配置表里添加optimization选项:
//webpack.prod.conf.js
...
output: { ...},
// 这里添加
optimization: {
runtimeChunk: {
name: 'manifest'
},
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap,
uglifyOptions: {
warnings: false
}
}),
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
],
splitChunks:{
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'styles',
test: /\.(scss|css)$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
},
plugins: [...]
复制代码
接着,我们需要引入mini-css-extract-plugin插件,并添加到插件里:
//webpack.prod.conf.js
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
...
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
...
]
复制代码
然后, 我们需要把废弃掉的插件注释掉:
– webpack.DefinePlugin
– UglifyJsPlugin (放到optimization里了)
– ExtractTextPlugin
– OptimizeCSSPlugin (放到optimization里了)
– CommonsChunkPlugin (换成了splitChunksPlugin，在optimization里了)
复制代码
修改 utils.js
这里主要是需要添加mini-css-extract-plugin插件
...
// 注释掉原来的插件
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
// 找到:
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: "vue-style-loader",
// publicPath: '../../'
// });
// 改为:
return [MiniCssExtractPlugin.loader].concat(loaders)
复制代码
目前文件修改就完成了。
其他问题
如果vue文件模板中有使用pug，也需要引入pug-loader、pug-plain-loader、pug：
npm install pug-loader pug-plain-loader pug --save-dev
复制代码
在webpack的base配置文件中加入：
{ test: /\.pug$/, use: ['pug-plain-loader'] },
复制代码
如果报：
Cannot assign to read only property 'exports' of object '#<Object>'
复制代码
这样的错误可以注释掉.babelrc文件中的 { "modules": false }：
["env", {
//注释掉
//"modules": false,
"targets": {
"browsers": ["> 5%", "last 2 versions", "not ie <= 8"]
}
}]
复制代码
参考：
《Vue项目从webpack3.x升级webpack4完全指南》
webpack官网升级指引
注意:HTML-WEBPACK-PLUGIN 需要升级
作者：大洋洋2020
链接：https://juejin.cn/post/6844904146332565518
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
