vue-cli全家桶脚手架项目构建工具webpack3升级4

因为vue全家桶vue-cli2.0仅支持 webpack3.6.0.需要手动升级 webpack4 提升打包效率。
1.手动升级 webpack webpack-cli(webpack4需要项目依赖中安装该依赖)。

"webpack": "^4.26.0",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",    //必须同步升级
"html-webapck-plugin": "3.2.0"

"webpack-merge": "^4.1.4",
"webpack-parallel-uglify-plugin": "^1.1.2"   //用于使用多线程压缩js。因为node是单线程的会阻塞 js压缩

错误： Connot find module ‘webpack-cli/bin/config -yargs     webpack与webpack-dev-server版本不匹配导致
安装依赖过程中出现了 依赖版本不匹配的问题，使用npm audit fix

2.webpack4 需要加入 模式配置
在webpack-base-config.js 输出对象中添加
 

mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',

3.webpack4 废弃extract-text-webpack-plugin 插件，替代方案为mini-css-extract-plugin插件，这个插件在配置中 有2处  build/utils文件中
修改如下：
 

//const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
if (options.extract) {
  // return ExtractTextPlugin.extract({
  //   use: loaders,
  //   fallback: 'vue-style-loader',
  //   publicPath:"../../"      这个配置应该在webpack.base.config中配置   静态文件的 publicPath: '../../'
  // })
  return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
  return ['vue-style-loader'].concat(loaders)
}

webpack.prod.conf.js

添加

new MiniCssExtractPlugin({

            filename: utils.assetsPath('css/[chunkname].css'),

            chunkFilename: utils.assetsPath('css/[name].[contenthash].css')

        }),

删除ExtractTextPlugin插件

4.webapck4 废弃了 CommonsChunkPlugin插件的使用。  改为在 optimization属性中配置 压缩和模块分割
//删除关于 new webpack.optimize.CommonsChunkPlugin 的代码
//在输出对象中添加配置

optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: [
      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: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
          priority: -10
        }
      }
    }

    5.//生产环境下 配置并行压缩js 使用插件 webpack-parallel-uglify-plugin
    

const parallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
    //写入plugin的数组中
    new parallelUglifyPlugin({
      // 传递给 UglifyJS的参数如下：
      uglifyJS: {
        output: {
          beautify: false,
          comments: false
        },
        compress: {
          /*
           是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
          */
          drop_console: true,

          /*
           是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
           转换，为了达到更好的压缩效果，可以设置为false
          */
          collapse_vars: false,

          /*
           是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成
           var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
          */
          reduce_vars: true
        }
      }
    }),

6.使用happypack插件优化打包， 发挥多核cpu的优点     webapck-base-config.js    

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

new HappyPack({
  //用id来标识 happypack处理那里类文件
  id: 'happyBabel',
  //如何处理  用法和loader 的配置一样
  loaders: [{
    loader: 'babel-loader?cacheDirectory=true',
  }],
  //共享进程池
  threadPool: happyThreadPool,
  //允许 HappyPack 输出日志
  verbose: true,
})

//启动程序 报错  eslint 配置问题
7.Cannot read property 'eslint' of undefined

在webpack-base-config.js 中引入webpack
plugins中加入
 

new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false,
    options: {
        context: __dirname
    }
})