Vue项目从webpack3.x升级webpack4不完全指南
前段时间，泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，现在才拉出来记录一下，已备忘之用，也和大家分享一下，以免大家采坑。
原先的环境
- 项目原先通过Vue-cli2.9.3版本构建，原先使用的webpack3.x版本
- 首先需要对基础包进行更新(package.json)
- webpack更新到4.x版本，泡面这里更新到了4.28.3
- 更新webpack-dev-server，泡面更新到了3.1.14版本,
- 安装webpack-cli，泡面安装的是3.2.1版本
除了上面的这几个，还需要更新下面几个：
- vue-loader泡面直接升级到了15版本，
- eslint-loader升级到了1.7.1,这个当时在做启动的时候提示了一些错误,所以索性也就升级了.
- happypack,泡面使用了多线程加速,所以这个也必须要升级,否则会报错,泡面更新到了5.0.1
- html-webpack-plugin,这个也需要更新,否则会提示错误,泡面这里升级到了3.2.0
除了上面几个,还需要额外下载一个:
- mini-css-extract-plugin,该包是要替换掉extract-text-webpack-plugin来使用,所以后者就遗弃掉了.
接着我们修改一下webpack.base.conf.js,没有使用happypack的这步骤可略过...
泡面这里不知道为什么不能使用happypack来挂载vue-loader,否则会提示错误,所以泡面这里将原先的happypack的配置修改回了原先:
...
constvueLoaderConfig=require('./vue-loader.conf')
...
module.exports={
...
{
test:/\.vue$/,
//loader:'happypack/loader?id=happy-vue'
loader:'vue-loader',
options:vueLoaderConfig
},
...
}
接着来调整webpack.dev.conf.js
首先在合并配置的地方引入mode
...
//开发环境引入
mode:'development',
...
module:{
...
}
devServer:{
...
}
webpack4需要手动引入vue-loader插件,因为泡面是从14版本升级到15版本,点我查看官方文档,如何从v14迁移,所以这里需要引入:
...
constVueLoaderPlugin=require('vue-loader/lib/plugin')
...
module.export={
...
plugins:[
...
//引入vue-loader插件
newVueLoaderPlugin(),
...
//同时,泡面注释掉了vue-loader的happypack
//newHappypack({
//id:'happy-vue',
//loaders:[{
//loader:'vue-loader',
//options:vueLoaderConfig
//}]
//})
]
}
接着,以下插件被废弃掉了,直接注释掉
- webpack.DefinePlugin
- webpack.NamedModulesPlugin
- webpack.NoEmitOnErrorsPlugin
ok,这个文件就改完了.
接着来修改webpack.prod.conf.js
同开发环境,需要引入mode和vue-loader,一模一样,所以这里不赘述了.
接着,我们需要在配置表里添加optimization选项:
...
output:{...},
//这里添加
optimization:{
runtimeChunk:{
name:'manifest'
},
minimizer:[
newUglifyJsPlugin({
cache:true,
parallel:true,
sourceMap:config.build.productionSourceMap,
uglifyOptions:{
warnings:false
}
}),
newOptimizeCSSPlugin({
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插件,并添加到插件里:
...
constMiniCssExtractPlugin=require('mini-css-extract-plugin')
...
plugins:[
...
newMiniCssExtractPlugin({
filename:utils.assetsPath('css/[name].[contenthash].css')
}),
...
]
然后,我们需要把废弃掉的插件注释掉:
webpack.DefinePlugin UglifyJsPlugin(放到optimization里了) ExtractTextPlugin OptimizeCSSPlugin(放到optimization里了) CommonsChunkPlugin(所有的...)
ok,至此该文件就调整完了.
最后一个utils.js
这里主要是需要添加mini-css-extract-plugin插件
...
//注释掉原来的插件
//constExtractTextPlugin=require("extract-text-webpack-plugin");
constMiniCssExtractPlugin=require('mini-css-extract-plugin')
...
//找到:
//returnExtractTextPlugin.extract({
//use:loaders,
//fallback:"vue-style-loader",
//publicPath:'../../'
//});
//改为:
return[MiniCssExtractPlugin.loader].concat(loaders)
ok,大功告成!至此webpack4的配置文件就全部修改完成了.
目前,泡面至在此记录流水账,回头性能测试再发文章记录.
ps:如果出现这种错误
error:[vue-loader]vue-template-compilermustbeinstalledasapeerdependency,oracompatiblecompilerimplementationmustbepassedviaoptions.
请重新安装一下vue-template-compiler
总结
以上所述是小编给大家介绍的Vue项目从webpack3.x升级webpack4不完全指南，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的