happypack 和 clean-webpack-plugin

webpack打包最耗时的要数 loader 对文件的转换操作了，使用 loader 将文件转换为我们需要的类型，文件数量巨大，webpack 执行是单线程的，转换的操作只能一个一个的处理。

安装 happypack：

npm install -S happypack

修改 webpack.config.js 配置文件：

const HappyPack = require('happypack');
module: {
    rules: [{
        test: /\.css$/,
        use: "HappyPack/loader?id=css"
    }]
}
plugins: [
    new HappyPack({
        // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
        id: "css",
        // 如何处理 .css 文件，用法和 Loader 配置中一样
        use: ["style-loader","css-loader"],
        //是否允许happypack输出日志，默认true
        verbose: true
    })
]

运行 webpack ，一共打开了三个 threads （线程）对文件进行打包。

如果我们不使用 happypack 进行打包，用时如下：

对比使用 happypack 和不使用 happypack 打包时间我们发现，不使用 happypack 打包时间更短。

注意这只是假象，我们打包的东西太小，开多线程太浪费了，所以它的功能只能在项目中进行体现。

clean-webpack-plugin

当配置的输出包名含有 [hash] [name] 等时，因为 [hash] 值会随着文件内容的改变而改变。

因此，我们需要在下一次 webpack 打包输出之前，把 dist 目录清空。
clean-webpack-plugin 可以实现 webpack 每次打包之前，清空指定目录。

注意: clean-webpack-plugin 插件应该放在 plugins 的最后，因为 webpack 的插件执行顺序是从后往前执行的。 比如:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
};

如果想指定文件夹请参考：

cleanWebpackplugin 升级踩坑_慕课手记 http://www.imooc.com/article/289614