webpack HappyPack实战详解

2024-08-28 06:13:44

由于运行在 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,
  })
 ]
}

在 Loader 配置中，所有文件的处理都交给了 happypack/loader 去处理，使用紧跟其后的 querystring ?id=babel 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件。
在 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 原理解析

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

webpack HappyPack实战详解

由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做. 我们需要Webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力,HappyPack就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程. 由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现. 提示:由于HappyPack 对fi
React 模块联邦多模块项目实战详解

目录前提: 1. 修改webpack增加ModuleFederationPlugin 2.本地开发测试 3.根据路由变化自动加载对应的服务入口 4.线上部署 5.问题记录前提: 老项目是一个多模块的前端项目,有一个框架层级的前端服务A,用来渲染界面的大概样子,其余各个功能模块前端定义自己的路由信息与组件.本地开发时,通过依赖框架服务A来启动项目,在线上部署时会有一个总前端的应用,在整合的时候,通过在获取路由信息时批量加载各个功能模块的路由信息,来达到服务整合的效果. // config.js
js单页hash路由原理与应用实战详解

本文主要介绍了js单页hash路由原理与应用实战详解,分享给大家,具体如下: 什么是路由? 通俗点说,就是不同的URL显示不同的内容什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能做在一个页面内. 那所谓的单页路由应用就是:在一个页面内,通过切换地址栏的URL来实现切换内容的变化. 如何知道URL切换了呢? 当url后面的锚文本发生变化时, 会触发onhashchange事件.通过这个事件,我们就可以对不同的URL 做出不同的处理.锚
Linux文件服务器实战详解（系统用户）

ftp匿名用户设置完成之后任何人都可以访问服务器端文件,目录,甚至可以修改删除文件和目录,,那如何存放私密文件并保证文件或者目录专属于拥有者呢,就需要使用vsftp系统用户来实现了. 1.在linux系统创建多个用户(useradd)并给用户设置密码 [root@www ~]# useradd xj1 [root@www ~]# useradd xj2 [root@www ~]# echo 123456|passwd --stdin xj1 [root@www ~]# echo 123456|p
Linux文件服务器实战详解(匿名用户)

一.进程与线程二.vsftp服务器 1.文件传输协议(file transfer protocol,FTP) 基于该协议ftp客户端和服务端实现文件共享,上传下载文件 FTP基于TCP协议生成一个虚拟的连接,用于控制ftp连接信息.同时再生成一个TCP连接用于FTP数据传输 2.ftp传输模式 3.FTP安装配置 a.yum方式安装 b.源码便宜安装 1)yum install -y vsftpd* 2)vsftpd安装后的配置文件路径,启动vsftpd服务以及查看进程是否启动 rpm
Linux文件服务器实战详解（虚拟用户）

vsftpd基于系统用户访问ftp服务器,系统用户越多越不利于管理,不利于系统安全,这样就以vsftp虚拟防护的方式来解决. 虚拟用户没有实际的真实系统用户,,而是通过映射到其中一个真实用户以及设置相应权限来访问验证,虚拟用户不能登陆系统. 1.安装虚拟用户需要用到的软件以及认证模块 [root@www ~]# yum install pam* libd-utils libdb* --skip -broken -y 2.创建虚拟用户临时文件 /etc/vsftpd/ftpusers.txt xj
Python API 自动化实战详解(纯代码)

主要讲如何在公司利用Python 搞API自动化. 1.分层设计思路 dataPool :数据池层,里面有我们需要的各种数据,包括一些公共数据等 config :基础配置 tools : 工具层 common: 公共方法层 runCase :需要运行的测试用例 noRunCase :不需要运行的测试用例 testReport :这里存放生成的测试报告 2.编写common: 公共方法层 2.1 getTimestamp.py 我们在common文件夹下新建一个getTimestamp.py. 因
vue和webpack安装命令详解

一.安装vue相关命令 1.安装vue cnpm install vue 2.安装vue-cli cnpm install -g vue-cli 3.查看vue安装版本 vue -V 二.安装webpack 1.安装webpack cnpm install -g webpack 2.安装webpack-dev-server cnpm install -g webpack-dev-server 3.查看webpack版本 webpack -v 总结以上所述是小编给大家介绍的vue和w
vite2.0+vue3移动端项目实战详解

一.涉及技术点 vite版本 vue3 ts 集成路由集成vuex 集成axios 配置Vant3 移动端适配请求代理二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro
Pygame坦克大战游戏开发实战详解代码

导语哈喽!哈喽——我是木木子今天来升级下之前写的坦克大战游戏嘛,哈哈哈其实也不算是修改,就是稍微的调试一下! 因为之前写的界面都是英文的 ,有的小伙伴儿英文一点儿都不会的可能看着别扭,今天来一款中文版的给大家嘛! 俗话说的好:“雨露均沾”.哈哈哈.jpg 小简介: <坦克大战>,1985年由日本开发商南梦宫(Namco)开发,是第一款可以双打的红白机游戏. 当时使用的还是小霸王. 很多小朋友以学习的名义买了以后偷偷打的打游戏还被家长发现了有没得! <坦克大战>红白机原

webpack HappyPack实战详解

相关推荐

随机推荐