vue/cli2下的项目升级到webpack4、babel7版本

升级前项目配置：vue 2 + webpack 3 +babel 6

升级后项目配置：vue 2 + webpack 4 +babel 7

babel部分

注意：babel-core需要卸载掉，从新安装@babel/core
npm un babel-core // 卸载 不然不同版本的core会发生冲突，构建失败

npm i -D @babel/core // 重新安装babel7的core
npm i -D babel-loader // babel7需要babel-loader8以上的版本，否则报错
npm i -D @babel/polyfill   
npm i -D @babel/runtime   
npm i -D @babel/plugin-transform-runtime "
npm i -D @babel/preset-env 

// 安装后，卸载不需要的babel6的相关插件，进行.babelrc 的文件配置
{
  "presets": [
    ["@babel/preset-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的写法问题和引入包名需要改变

升级中遇到的问题：
1. 修改引用了babel-polyfill的插件名称的地方 ==》 @babel/polyfill
2. babel 7 已经删除了babel-preset-stage-2
注意： 如果你使用了cube-ui且采用的后编译模式，还一个需要将 .babelrc文件转换成babel.config.js文件，不然就会报错如下：

ERROR  Failed to compile with 2 errors                                                                3:04:52 ├F10: PM┤

error  in ./node_modules/cube-ui/src/components/dialog/dialog.vue

Module parse failed: Unexpected token (115:17)
You may need an appropriate loader to handle this file type.
|
|       default() {
|         return { ...defConfirmBtn
|         };
|       }
@ ./node_modules/cube-ui/src/components/dialog/dialog.vue 8:0-384 9:0-397
@ ./node_modules/cube-ui/src/modules/dialog/index.js
@ ./node_modules/cube-ui/src/module.js
@ ./node_modules/cube-ui/src/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.51:8080 webpack/hot/dev-server @babel/polyfill ./src/main.js

webpack部分

注意：webpck4，需要升级其他包，否则webpack4不支持，会运行报错，如

webpack-dev-server最新版、vue-loader 15版本以上html-webpack-plugin最新版 stylus-loader最新版

1、安装全局webpack-cli cnpm install webpack-cli@^3 -g
2、安装项目webpack-cli cnpm install --save-dev webpack-cli@^3
3、升级webpack npm install webpack@^4 -D
4、升级 webpack-dev-server cnpm install webpack-dev-server -D // webpack4需要webpack-dev-server 3以上的版本，否则不兼容会报错
5、升级vue-loader cnpm install vue-loader@^15 -D
6、cnpm install html-webpack-plugin@^4 -D
7、安装mini-css-extract-plugin -D 替换卸载 extract-text-webpack-plugin
8、升级 stylus-loader cnpm i stylus-loader@^3 -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新增
……
const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development', // 新增
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  ……
  plugins: [
  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 删除
const devWebpackConfig = merge(baseWebpackConfig, {
 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包，重新下载

解决办法二： 将webpack-cli的版本降低到4以下