vue 项目webpack3升级为webpack4

相比于webpack3，webpack4可以零配置运行，打包速度比之前提高了90%，可以直接到ES6的代码进行无用代码剔除。

1.升级nodejs

使用webpack4时，必须保证Node.js版本>=8.9.4,因为webpack4使用了大量的ES6的语法，这些语法在nodejs新版v8中得到了原生支持

2.升级webpack主要插件，升级的操作很简单，先删除低版本，再安装新版本即可。但要注意的是webpack4版本中cli工具分离成了webpack核心库与webpack-cli命令行工具两个模块，需要使用cli，必须安装webpack-cli。

npm uninstall webpack webpack-bundle-analyzer webpack-dev-server webpack-merge -D

npm install webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge -D

3.升级webpack相关插件

npm uninstall copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

npm install copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

4.升级vue-loader

由于vue-loader升级到版本15后，配置有较多变化，稳妥起见，可以将vue-loader升级到14.2.4

npm uninstall vue-loader -D

npm install [email protected] -D

5.替换webpack相关插件，extract-text-webpack-plugin替换为mini-css-extract-plugin

npm uninstall extract-text-webpack-plugin -D

npm install mini-css-extract-plugin -D

配置修改

    1.webpack.base.conf.js文件

        增加mode属性

module.exports = {
   + mode: process.env.NODE_ENV
}

   2. util.js文件

+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')

function generateLoaders(loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

   if (loader) {
        loaders.push({
          loader: loader + '-loader',
          options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
          })
        })
   }

   // Extract CSS when that option is specified
   // (which is the case during production build)
   if (options.extract) {
      + return [MiniCssExtractPlugin.loader].concat(loaders)
      - return ExtractTextPlugin.extract({
      -   use: loaders,
      -   fallback: 'vue-style-loader'
      - })
   } else {
       return ['vue-style-loader'].concat(loaders)
   }
}

   3.webpack.prop.conf.js文件

     该文件的配置修改较为复杂

     （1）将MiniCssExtractPlugin代替ExtractTextPlugin

+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
...
-  new ExtractTextPlugin({
+  new MiniCssExtractPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css'),
   allChunks: true,
  }),

       （2）删除UglifyJsPlugin配置项

- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
- new UglifyJsPlugin({
-   uglifyOptions: {
-    compress: {
-     warnings: false
-    }
-   },
-   sourceMap: config.build.productionSourceMap,
-   parallel: true
- })

       （3）删除CommonsChunkPlugin配置项

- new webpack.optimize.CommonsChunkPlugin({
-   name: 'vendor',
-   minChunks (module) {
-    return (
-     module.resource &&
-     /\.js$/.test(module.resource) &&
-     module.resource.indexOf(
-      path.join(__dirname, '../node_modules')
-     ) === 0
-    )
-   }
-  }),
-  new webpack.optimize.CommonsChunkPlugin({
-   name: 'manifest',
-   minChunks: Infinity
-  }),
-  new webpack.optimize.CommonsChunkPlugin({
-   name: 'app',
-   async: 'vendor-async',
-   children: true,
-   minChunks: 3
-  }), 

   （4）添加optimization配置项(与plugins平级)

 + optimization: {
 +   splitChunks: {
 +     chunks: 'async',
 +     minSize: 30000,
 +     minChunks: 1,
 +     maxAsyncRequests: 5,
 +     maxInitialRequests: 3,
 +     automaticNameDelimiter: '~',
 +     name: true,
 +     cacheGroups: {
 +       vendors: {
 +         test: /[\\/]node_modules[\\/]/,
 +         priority: -10
 +       },
 +       default: {
 +         minChunks: 2,
 +         priority: -20,
 +         reuseExistingChunk: true
 +       }
 +     }
 +   },
 +   runtimeChunk: {
 +     name: 'runtime'
 +   }
 + },