happypack 介绍
由于有大量 文件 需要解析和处理，构建是 文件 读写和计算密集型的操作，特别是当 文件 数量 变多后，webpack 构建慢的问题会显得严重。 运行在 Node.js 之上的 webpack 是单线程模型的，也就是说 webpack 需要处理的任务需要一件件挨着做，不能多个事情一起做。
happypack 是 webpack 的 一个 插件 ，目的是通过多进程模型，来加速 代码 构建 。 分解任务和管理线程的事情 HappyPack 都会帮你做好，你所需 要做 的只是接入 HappyPack。 接入 HappyPack 的相关 代码 如下：
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HappyPack = require('happypack');
module.exports = {
module: {
rules: [
{
test: /.js$/,
// 把对 .js 文件 的处理转交给 id 为 babel 的 HappyPack 实例
use: ['happypack/loader?id=babel'],
// 排除 node_modules 目录下的 文件 ，node_modules 目录下的 文件 都是采用的 ES5 语法，没必要再通过 Babel 去转换
exclude: path.resolve(__dirname,'node_modules'),
},
{
// 把对 .css 文件 的处理转交给 id 为 css 的 HappyPack 实例
test: /.css$/,
use: ExtractTextPlugin.extract({
use: ['happypack/loader?id=css'],
}),
]
},
plugins: [
new HappyPack({
// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的 文件
id: 'babel',
// 如何处理 .js 文件 ， 用法 和 Loader 配置中一样
loaders: ['babel-loader?cacheDirectory'],
// ... 其它配置项
}),
new HappyPack({
id: 'css',
// 如何处理 .css 文件 ， 用法 和 Loader 配置中一样
loaders: [' css- loader'],
new ExtractTextPlugin({
filename: `[name].css`,
],
};
GitHub: https://github.com/amireh/happypack
网站描述: 提升 webpack 的构建速度
happypack官方网站
官方网站：
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。