关于javascript:记项目升级详细记录vue项目升级到webpack4babel7版本

我的项目降级指标：

原版我的项目：vue2+webpack3+babel6
降级我的项目：vue2+webpack4+babel7

最近须要将 vue 我的项目降级，以取得更好的构建性能和开发便当，因为网上没有一个能够参考的实用用性文章，故此将降级我的项目过程记录并分享给各位，心愿对各位有用。也欢送关注公众号：前端学海

依据屡次尝试总结出的教训，先降级与 webpack 无关的组件，而后再降级 webpack，留神 webpack 不同的版本须要的 webpack-cli 也不同，否则会产生兼容报错，切记！！！

最好依照一下给出的降级程序进行，每个包前面的版本为我降级胜利的包的版本，大部分是我降级时的最高稳定版，给位能够依据本人的须要，降级到指定版本。小心降级哦~

我的项目包的降级和卸载：

babel 局部：

(1)babel-core 卸载掉，从新装置 @babel/core
npm un babel-core // 卸载 不然不同版本的 core 会发生冲突，构建失败

npm i -D @babel/core // 重新安装 babel7 的 core
npm 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 -g
2、装置我的项目 webpack-cli cnpm install --save-dev webpack-cli
3、降级 webpack npm install webpack@4.43.0 -D
4、降级 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 -D
6、cnpm install html-webpack-plugin@3.2.0 -D
7、装置 mini-css-extract-plugin -D 替换卸载 extract-text-webpack-plugin
8、降级 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 我的项目的具体优化步骤，降级了哪些？有什么作用？成果怎么？

 欢送各位批评指正！！！