webpack HappyPack实战详解


Posted in Javascript onOctober 08, 2019

由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做。

我们需要Webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力,HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。

由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。

提示:由于HappyPack 对file-loader、url-loader 支持的不友好,所以不建议对该loader使用。

安装 HappyPack

npm i -D happypack

运行机制

webpack HappyPack实战详解

使用 HappyPack

修改你的webpack.config.js 文件

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

module.exports = {
 module: {
  rules: [
   {
    test: /\.js$/,
    //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
    loader: 'happypack/loader?id=happyBabel',
    //排除node_modules 目录下的文件
    exclude: /node_modules/
   },
  ]
 },
plugins: [
  new HappyPack({
    //用id来标识 happypack处理那里类文件
   id: 'happyBabel',
   //如何处理 用法和loader 的配置一样
   loaders: [{
    loader: 'babel-loader?cacheDirectory=true',
   }],
   //共享进程池
   threadPool: happyThreadPool,
   //允许 HappyPack 输出日志
   verbose: true,
  })
 ]
}
  1. 在 Loader 配置中,所有文件的处理都交给了 happypack/loader 去处理,使用紧跟其后的 querystring ?id=babel 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件。
  2. 在 Plugin 配置中,新增了两个 HappyPack 实例分别用于告诉 happypack/loader 去如何处理 .js 和 .css 文件。选项中的 id 属性的值和上面 querystring 中的 ?id=babel 相对应,选项中的 loaders 属性和 Loader 配置中一样。

HappyPack 参数

  • id: String 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件.
  • loaders: Array 用法和 webpack Loader 配置中一样.
  • threads: Number 代表开启几个子进程去处理这一类型的文件,默认是3个,类型必须是整数。
  • verbose: Boolean 是否允许 HappyPack 输出日志,默认是 true。
  • threadPool: HappyThreadPool 代表共享进程池,即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务,以防止资源占用过多。
  • verboseWhenProfiling: Boolean 开启webpack --profile ,仍然希望HappyPack产生输出。
  • debug: Boolean 启用debug 用于故障排查。默认 false。

总结

如果想详细了解happypack的原理 可以看这篇文章
happypack 原理解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 #Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 #Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 #Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 #Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 #Javascript
深入学习Vue nextTick的用法及原理
Oct 08 #Javascript
jQuery 筛选器简单操作示例
Oct 02 #jQuery
You might like
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python的继承知识点总结
2018/12/10 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python 同时运行多个程序的实例
2019/01/07 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
10条PHP编程习惯
2014/05/26 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电