项目升级目标：原项目：vue2+webpack3+babel6升级项目：vue2+webpack4+babel7最近需要升级vue项目，以便更好地构建性能和开发便利性。由于网上没有实用的文章可以参考，所以将项目升级的过程记录下来分享给大家。我希望它对你有用。也欢迎关注公众号：根据多次尝试总结的经验，前端学海先升级与webpack无关的组件，再升级webpack。注意不同版本的webpack需要不同的webpack-cli，否则会出现兼容性错误，切记！！！最好遵循下面给出的升级顺序。每个包后面的版本是我升级成功的包的版本。其中大部分是我升级时的最高稳定版本。您可以根据需要升级到指定版本。升级要小心~项目包的升级和卸载：babel部分：(1)卸载babel-core，重新安装@babel/corenpmunbabel-core//卸载否则不同版本的core会冲突导致构建失败failnpmi-D@babel/core//重新安装babel7的corenpmi-Dbabel-loader@8.1.0//babel7需要babel-loader8以上的版本，否则会报错npmi-D@babel/polyfill"@babel/polyfill":"^7.10.1",npmi-D@babel/runtime"@babel/runtime":"^7.10.2",npmi-D@babel/plugin-transform-runtime"@babel/plugin-transform-runtime":"^7.10.1",npmi-D@babel/preset-env"@babel/preset-env":"^7.10.2",//安装后卸载不需要的babel6相关插件和.babelrc的文件配置{"presets":[["@babel/env",{//babel7的写法,"targets":{"edge":"17","firefox":"60","chrome":"67","safari":"11.1"},"corejs":"2",//指定编译的corejs版本，否则为搭建线上环境时会报warning"useBuiltIns":"usage"}]],"plugins":["transform-vue-jsx","@babel/plugin-transform-runtime"]}//如果报错编译的时候报：this.setDynamicisnotafunctionCannotfindmodule'@transform-runtime/babel-plugin'/等等，大部分都是babel6到babel7没有转换的配置写法的一部分。至此，基本的babel替换完成，项目启动成功。webpack部分：注意：webpck4，其他package需要升级，否则webpack4不支持，运行会报错，如webpack-dev-server，vue-loaderversion15及以上html-webpack-plugin最新版本stylus-loader最新版本1.安装全局webpack-clicnpminstallwebpack-cli-g2。安装项目webpack-clicnpminstall--save-devwebpack-cli3。升级webpacknpminstallwebpack@4.43.0-D4。升级webpack-dev-servercnpminstallwebpack-dev-server@3.1.14-D//webpack4需要webpack-dev-server3或以上，否则不兼容会报错5.升级vue-loadercnpminstallvue-loader@15.0.0-D6,cnpminstallhtml-webpack-plugin@3.2.0-D7,安装mini-css-extract-plugin-D替换卸载extract-text-webpack-plugin8,升级stylus-loadercnpmistylus-loader@3.0.2-D最新版本修改了原项目的配置，删除了过时的插件配置：1.utils.js//constExtractTextPlugin=require('extract-text-webpack-plugin')//dldeletesconstMiniCssExtractPlugin=require('mini-css-extract-plugin')//dlnewif(options.extract){//returnExtractTextPlugin.extract({dldelete//use:loaders,//fallback:'vue-style-loader',//publicPath:'../../'//})return[MiniCssExtractPlugin.loader].concat(loaders)//添加了dl}else{return['vue-style-loader'].concat(loaders)}2,webpack.dev.conf.jsconst{VueLoaderPlugin}=require('vue-loader')//添加新模式到dl:'development',//添加新的VueLoaderPlugin(),//添加3到dl,webpack.base.conf.js{test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader:'url-loader',exclude:/node_modules/,options:{limit:10000,publicPath:'../../',//添加路径，否则元素icon图标路径不正确，打包后不显示，name:utils.assetsPath('fonts/[name].[hash:7].[ext]')}},4、webpack.产品。confconst{VueLoaderPlugin}=require('vue-loader')//添加了dlconstMiniCssExtractPlugin=require('mini-css-extract-plugin')//添加了dl//constExtractTextPlugin=require('extract-text-webpack-plugin')//dldeletemode:'production',//添加优化:{//dladdruntimeChunk:{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}}:{安全:true}}),],splitChunks:{chunks:'async',minSize:30000,minChunks:1,maxAsyncRequests:5,maxInitialRequests:3,name:false,cacheGroups:{供应商:{test:/[\\/]node_modules[\\/]/,name:'vendor',chunks:'initial',priority:-10}}}},plugins:[newVueLoaderPlugin(),//dl新增//newExtractTextPlugin({dl--删除//filename:utils.assetsPath('css/[name].[contenthash].css'),////将以下选项设置为`false`将不会从codesplit块中提取CSS。////他们的CSS将改为动态插入当codesplit块已被webpack加载时，样式加载器。////它当前设置为`true`因为我们看到sourcemaps也包含在codesplit包中，当它为`false`时，////增加文件大小：https://github.com/vuejs-templates/webpack/issues/1110//allChunks:true,//}),newMiniCssExtractPlugin({//dl新增文件名:utils.assetsPath('css/[name].css'),chunkFilename:utils.assetsPath('css/[name].[contenthash].css')}),//--------------------dl删除//newwebpack.optimize.CommonsChunkPlugin({//name:'vendor',//minChunks(module){////node_modules中的任何必需模块都被提取到vendor//return(//module.resource&&///\.js$/.test(module.resource)&&//module.resource.indexOf(//path.join(__dirname,'../node_modules')//)===0//)//}//}),////将webpack运行时和模块清单提取到它自己的文件中，以////防止在更新应用程序包时更新供应商哈希//newwebpack.optimize.CommonsChunkPlugin({//name:'manifest',//minChunks:Infinity//}),////此实例从代码拆分块中提取共享块并将它们捆绑////在一个单独的块中，类似于供应商块////请参阅：https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk//newwebpack.optimize.CommonsChunkPlugin({//name:'app',//async:'vendor-async',//children:true,//minChunks:3//}),]可能会报错：Cannotfindmodule'webpack-cli/bin/config-yargs'直接删除node_modul包，重新下载我的project这里运行正常。只是对vue-cli脚手架的基础配置进行了升级，没有大的优化。只是升级而已，基本满足一般项目使用。后期会一一优化。个人建议：一定要先升级babel完了再升级webpack。根据我之前几次折腾失败后总结出来的经验，在下一篇文章中，我将分享我升级的vue项目的具体优化步骤，升级了哪些？效果如何？效果如何？欢迎批评指正！！！
