webpack HappyPack实战详解

 更新时间:2019年10月08日 09:43:46   作者:大饭团CC   我要评论

这篇文章主要介绍了webpack HappyPack实战详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

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

安装 HappyPack

npm i -D 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 得到文件后缀名的思路及实现

    在上传文件时,常常要对文件的类型即对文件的后缀名进行判断,用javascript可以很容易的做到这一点。用Javascript解析一个带绝对路径的文件名并得到后缀名的方法有很多种,这里列出一种,以供参考。
    2013-07-07
  • javascript实现获取字符串hash值

    javascript实现获取字符串hash值

    Hash 可以看作是一个 关联数组,它对每一个值都绑定了一个唯一的键(值并不必须是唯一的), 然而,它不能保证迭代时元素的顺序始终一致。因为 JavaScript 程序语言的特性,每个对象实际上都是一个 hash,下面我们就来详细探讨下。
    2015-05-05
  • 基于js中的原型(全面讲解)

    基于js中的原型(全面讲解)

    下面小编就为大家带来一篇基于js中的原型(全面讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js replace正则表达式应用案例讲解

    js replace正则表达式应用案例讲解

    js replace与正则表达式结合,可以有效发挥replace的功效,可以帮助用户解决替换中的复制问题,接下来详细介绍使用方法,感兴趣的朋友可以了解下
    2013-01-01
  • PHP配置文件php.ini中打开错误报告的设置方法

    PHP配置文件php.ini中打开错误报告的设置方法

    这篇文章主要介绍了PHP配置文件php.ini中打开错误报告的设置方法,需要的朋友可以参考下
    2015-01-01
  • 使用script的src实现跨域和类似ajax效果

    使用script的src实现跨域和类似ajax效果

    在解决js的跨域问题的时候, 有多种方式, 其中有一种是利用script标签的src属性,因为这个属性是不受域名限制的,我们可以直接让src的这个链接指向跨域网站的一个接口, 这个接口返回的是js代码或者json格式数据, 从而实现跨域获取数据。
    2014-11-11
  • 小程序开发中如何使用async-await并封装公共异步请求的方法

    小程序开发中如何使用async-await并封装公共异步请求的方法

    在平常的项目开发中肯定会遇到同步异步执行的问题,这篇文章主要介绍了小程序开发中如何使用async-await并封装公共异步请求的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • js 三级关联菜单效果实例

    js 三级关联菜单效果实例

    这篇文章介绍了js 三级关联菜单效果,有需要的朋友可以参考一下
    2013-08-08
  • 详解Javascript事件驱动编程

    详解Javascript事件驱动编程

    这篇文章主要为大家详细介绍了Javascript事件驱动编程的相关资料,通过经典案例向大家介绍Javascript事件驱动编程,需要的朋友可以参考下
    2016-01-01
  • js复制内容到剪贴板代码,js复制代码的简单实例

    js复制内容到剪贴板代码,js复制代码的简单实例

    下面小编就为大家带来一篇js复制内容到剪贴板代码,js复制代码的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10

最新评论