1. 简介
happypack 是一个 JavaScript 工具，可用于加速 Webpack 编译时间。它通过将 Webpack loader 转换进程从同步执行转换为并发执行，提高了构建性能。
2. 安装
使用 npm 安装 happypack：
npm install happypack --save-dev
3. 使用
3.1 在 Webpack 中配置 HappyPack
在 Webpack 配置文件中添加 HappyPack 插件。例如：
-- -------------------- ---- ------- ----- --------- - --------------------- -------------- - - -- --- ------- - ------ - - ----- -------- -- --- ---- ------------------------- -- -- --- -- -- -------- - --- ----------- --- ----- -------- -- -------- ----------------- --- -- --- -- --展开代码
上面的配置将使用 HappyPack 加载器处理匹配 test: /\.js$/ 的文件。线程数为 4，指定使用 babel-loader。 id 属性可用于访问插件中的任务列表，以便其他插件可以使用它们。
3.2 修改 package.json
在 scripts 属性中新增 build:happy 命令：
{ "scripts": { "build:happy": "happypack ./webpack.config.js" } }
3.3 执行构建
执行 npm run build:happy 命令，会自动开启多个线程执行打包任务。
4. 示例代码
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- --------- - --------------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- -------- -- ------- - ------ - - ----- -------- -------- --------------- ---- ------------------------- -- -- -- -------- - --- ----------- --- ----- -------- -- -------- ----------------- --- --- ------------------------- -- --展开代码
5. 总结
happypack 可以大大提高 Webpack 的编译性能。通过并发执行 Webpack loader 转换进程，它能够更快地处理代码，并在构建过程中有效地利用计算资源。在将 Webpack 与大型项目一起使用时，使用 happypack 可以保持构建时间的短暂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56971
