webpack HappyPack实战详解

webpack HappyPack实战详解

什么是 HappyPack

HappyPack是一个webpack插件，可以将代码在多个子进程中并行编译，提高构建的速度。

HappyPack使用

使用步骤：

1. 安装 HappyPack： npm install happypack -D
2. 引入 HappyPack:

js
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 4 });
3. 配置 HappyPack:

js
module: {
rules: [
{
test: /\.js$/,
use: 'happypack/loader?id=js',
exclude: /node_modules/
}
]
},
plugins: [
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader']
})
]

配置说明：

1. id: 描述 HappyPack 实例的唯一标识符，用于指明建立哪些子线程处理文件；
2. threadPool: 使用的新建子线程的线程池的配置；
3. loaders: 和使用哪些 loader 一样。

HappyPack示例

示例1：加快打包速度

假设我们有一个js文件，在进行webpack打包时，需要对其处理，这个js文件非常大，需要很长时间来进行编译，我们可以使用 HappyPack 进行打包优化。

1. 安装 HappyPack：npm install happypack -D
2. 修改webpack配置：

```js
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.js$/,
use: 'happypack/loader?id=js',
exclude: /node_modules/
}
]
},
plugins: [
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader']
})
]
};
```

示例2：加快eslint的检查速度

假设我们的项目需要使用 eslint 进行语法检查，但是检查后文件比较大，构建时间较长，我们可以使用 HappyPack 加快 eslint 的检查速度。

1. 安装 HappyPack 和 eslint-loader：npm install happypack eslint eslint-loader -D
2. 修改webpack配置：

```js
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.js$/,
include: [path.resolve(__dirname, 'src')],
enforce: 'pre',
use: [
'happypack/loader?id=eslint',
]
}
]
},
plugins: [
new HappyPack({
id: 'eslint',
threadPool: happyThreadPool,
loaders: ['eslint-loader'],
verbose: true
})
]
};
```

以上是 HappyPack 的使用和示例，HappyPack可以大大提高webpack的构建速度，尤其在大型项目中，效果非常显著。