常用webpack的优化（自我总结版）

构建速度的优化：
1.HappyPack
  基于webpack的编译模式本是单线程，时间占时最多的Loader对文件的转换。 开启HappyPack，可以讲任务分解成多个进程去并行处理。
  简单配置：
    new HappyPack({
      // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
      id: 'babel',
      // 如何处理 .js 文件，用法和 Loader 配置中一样
      loaders: ['babel-loader?cacheDirectory'],
      // ... 其它配置项
    }),
  详细可参考：http://www.fly63.com/nav/1472
2.DllPlugin
   可将一些Node_moudle一些编译好的库，常用而且不变的库，抽出来。这样就无需重新编译。
3.Loader 记录配置搜索范围，include，exclude
    如：   {
        test: /\.js$/, //js文件加载器
        exclude: /node_modules/,
        use: [
            {
              loader: 'babel-loader?cacheDirectory=ture',
              options: {
                presets: ['@babel/preset-env']
              },
              include: Path2D.resolve(__dirname, 'src')
            }
        ]
      },

优化打包大小：
1.tree shaking写法。
  即“摇树”。即只引入所需要引入部分，其余的代码讲会过滤。
2.压缩代码
  当前最程愫的压缩工具是UglifyJS。HtmlWebpackPlugin也可配置minify等。
3.文件分离
  多个文件加载，速度更快。
   例如：mini-css-extract-plugin，将css独立出来。
        这样还有利于，部分“不变”的文件做缓存。
4.Scope Hoisting
  开启后，分细分出模块直接的依赖关系，会自动帮我们合并函数。
   简单的配置：
   module,exports={
    optimization:{
        concatenateModules:true
    }
   }

此外：
如webpack问题还存在，推荐webpack-analysis进行分析。