webpack 3升级到4踩坑

性能提升总结：

从3.12.0更新到4.29.6后webpack4整体打包速度有提升，如果不新增happypack大概提升20%

happypack用了大概提升了50%打包速度（注意happypack对file-loader和url-loader的支持不友好，不建议图片以及文字之类的试用）

部分包升级和调整

html-webpack-plugin 升级至 3.0.4

extract-text-webpack-plugin  改成 mini-css-extract-plugin

url-loader、file-loader等升级，简单来讲，哪里报错就升级哪个包

配置文件修改：

1、module 修改rules 格式调整

之前的  loader:"***"都修改成 user:{ loader：“***” }

2、如果用了mini-css-extract-plugin module的less配置部分也需要调整成

{

            test: /\.less$/,

            use: [MiniCssExtractPlugin.loader,'css-loader','less-loader']

  }

然后plugins里需要配置

new MiniCssExtractPlugin({

        filename: "../[name].css", //生成的文件名和对应路径

}),

打包优化：

module rules内优化项

1、include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

2、采用happypack多进程打包构建：https://github.com/amireh/happypack