我的项目降级指标：
原版我的项目：vue2+webpack3+babel6
降级我的项目：vue2+webpack4+babel7
最近须要将vue我的项目降级，以取得更好的构建性能和开发便当，因为网上没有一个能够参考的实用用性文章，故此将降级我的项目过程记录并分享给各位，心愿对各位有用。也欢送关注公众号：前端学海
依据屡次尝试总结出的教训，先降级与webpack无关的组件，而后再降级webpack，留神webpack不同的版本须要的webpack-cli也不同，否则会产生兼容报错，切记！！！
最好依照一下给出的降级程序进行，每个包前面的版本为我降级胜利的包的版本，大部分是我降级时的最高稳定版，给位能够依据本人的须要，降级到指定版本。小心降级哦~
我的项目包的降级和卸载：
babel局部：
(1)babel-core卸载掉，从新装置@babel/corenpm un babel-core // 卸载 不然不同版本的core会发生冲突，构建失败npm i -D @babel/core // 重新安装babel7的corenpm i -D babel-loader@8.1.0 // babel7须要babel-loader8以上的版本，否则报错npm i -D @babel/polyfill "@babel/polyfill": "^7.10.1", npm i -D @babel/runtime "@babel/runtime": "^7.10.2",npm i -D @babel/plugin-transform-runtime "@babel/plugin-transform-runtime": "^7.10.1",npm i -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版本，否则构建线上环境时会报正告 "useBuiltIns": "usage" }] ], "plugins": ["transform-vue-jsx", "@babel/plugin-transform-runtime"]}// 如果编译报错： this.setDynamic is not a function Cannot find module '@transform-runtime/babel-plugin' // 诸如此类，大部分均为局部配置写法未从babel6转为babel7的写法问题到这里根本的babel的替换实现，我的项目启动胜利
webpack局部：
留神：webpck4，须要降级其余包，否则webpack4不反对，会运行报错，如webpack-dev-server、vue-loader 15版本以上html-webpack-plugin最新版 stylus-loader最新版1、装置全局webpack-cli cnpm install webpack-cli -g2、装置我的项目webpack-cli cnpm install --save-dev webpack-cli3、降级webpack npm install webpack@4.43.0 -D4、降级 webpack-dev-server cnpm install webpack-dev-server@3.1.14 -D // webpack4须要webpack-dev-server 3以上的版本，否则不兼容会报错5、降级vue-loader cnpm install vue-loader@15.0.0 -D6、cnpm install html-webpack-plugin@3.2.0 -D7、装置mini-css-extract-plugin -D 替换卸载 extract-text-webpack-plugin8、降级 stylus-loader cnpm i stylus-loader@3.0.2 -D 最新版本批改原我的项目的配置，和删除废除的插件配置：
1、utils.js
// const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl删除const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl新增 if (options.extract) { // return ExtractTextPlugin.extract({ dl 删除 // use: loaders, // fallback: 'vue-style-loader', // publicPath: '../../' // }) return [MiniCssExtractPlugin.loader].concat(loaders) // dl新增 } else { return ['vue-style-loader'].concat(loaders) }2、webpack.dev.conf.js
const { VueLoaderPlugin } = require('vue-loader') // dl新增mode: 'development', // 新增new VueLoaderPlugin(), //dl新增3、webpack.base.conf.js
{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', exclude: /node_modules/, options: { limit: 10000, publicPath: '../../', // 增加门路，否则element icon图标门路不对，打包后不显示， name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } },4、webpack.prod.conf
const { VueLoaderPlugin } = require('vue-loader') // dl新增const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl 新增// const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl 删除mode: 'production', // 新增 optimization: { // dl新增 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: { vendors: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'initial', priority: -10 } } } }, plugins: [ new VueLoaderPlugin(), //dl新增 // new ExtractTextPlugin({ dl--删除 // filename: utils.assetsPath('css/[name].[contenthash].css'), // // Setting the following option to `false` will not extract CSS from codesplit chunks. // // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, // // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 // allChunks: true, // }), new MiniCssExtractPlugin({ // dl 新增 filename: utils.assetsPath('css/[name].css'), chunkFilename: utils.assetsPath('css/[name].[contenthash].css') }), //--------------------dl 删除 // new webpack.optimize.CommonsChunkPlugin({ // name: 'vendor', // minChunks (module) { // // any required modules inside node_modules are extracted to vendor // return ( // module.resource && // /\.js$/.test(module.resource) && // module.resource.indexOf( // path.join(__dirname, '../node_modules') // ) === 0 // ) // } // }), // // extract webpack runtime and module manifest to its own file in order to // // prevent vendor hash from being updated whenever app bundle is updated // new webpack.optimize.CommonsChunkPlugin({ // name: 'manifest', // minChunks: Infinity // }), // // This instance extracts shared chunks from code splitted chunks and bundles them // // in a separate chunk, similar to the vendor chunk // // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk // new webpack.optimize.CommonsChunkPlugin({ // name: 'app', // async: 'vendor-async', // children: true, // minChunks: 3 // }), ] 可能会报错：Cannot find module 'webpack-cli/bin/config-yargs'间接删除node_modul包，从新下载即可我的我的项目到这里就运行失常了，仅仅是对vue-cli脚手架的根本配置进行降级，也没有什么大的优化，只是降级，根本满足个别的我的项目应用，
前期开始进行一一优化，集体倡议：肯定要先降级完babel，再来降级webpack， 依据我之前几次失败的折腾总结的教训。
前面一篇文章，会分享我降级后的vue我的项目的具体优化步骤，降级了哪些？有什么作用？成果怎么？
欢送各位批评指正！！！