webpack3升级到webpack4优化打包

项目开发至今已有2年多，随着模块的不断迭代，打包的速度逐渐变慢，现在打包大约要用37分钟，这速度堪忧…

本文主要针对打包加速的2种思路：

1、在webpack3的基础上的打包优化

• 用DllPlugin插件加速打包，最后打包速度大约用9分钟
• 用happypack+webpack-parallel-uplift-plug-in多线程打包工具，最后打包速度大约在5分种
• 前面2种方式结合，打包速度能优化到4分钟

DllPlugin插件的配置：

步骤一：在build文件夹下，新建dll.config.js文件，内容如下：

const path = require('path')

const webpack = require('webpack')

 //这个变量存放需要打包依赖插件

const vendors = ['vue', 'vuex', 'vue-router', 'pdfh5', 'whatwg-fetch']

module.exports = {
    output: {
       path: path.join(__dirname, '../static/javascripts'), //打包之后存放的路径

       filename: '[name].dll.js',

      library: '[name]'

    },

    entry: { 'lib': vendors }, //放上面依赖插件的变量

    plugins: [
       new webpack.DllPlugin({
          path: 'manifest.json', //依赖打包生成的文件

          name: '[name]',

          context: __dirname

       })

    ]
}

步骤二：在package.json添加打包命令行

"script":{
    ...,

    "dll": "webpack --config build/dll.config.js",
     //_build是把依赖生成的文件命令和build打包用&&连续，达到合成效果

     "_build": "webpack --config build/dll.config.js && node build/build.js"

  }

步骤三：在webpack.prod.js的plugins追加依赖打包的配置

//配置前安装add-asset-html-webpack-plugin 插件

npm install -D add-asset-html-webpack-plugin

//先申明插件变量

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

//找到webpack.prod.js文件对应的plugins添加一下代码
plugins:[
   ...,

   //告诉webpack那些库不参与打包的

   new webpack.DllferencePlugin({
      context: __dirname,

      manifest: path.resolve(__dirname, '../manifest.json')

    }),

    //将某个文件打包输出去，并在html自动引入资源

    new AddAssetHtmlWebpackPlugin({
        //filepath是打包依赖生成的dll文件路径
        filepath: path.resolve(__dirname, '../static/javascripts/lib.dll.js'),

        includeSourcemap: fa