文章目录
- 一文大白话讲清楚webpack基本使用------18------HappyPack
- [1. 建议按文章顺序从头看，一看到底，豁然开朗](#1. 建议按文章顺序从头看，一看到底，豁然开朗)
- [2. 啥是HappyPack](#2. 啥是HappyPack)
- [3. 怎么使用HappyPack](#3. 怎么使用HappyPack)
一文大白话讲清楚webpack基本使用------18------HappyPack
1. 建议按文章顺序从头看，一看到底，豁然开朗
- 第一篇：
- 一文大白话讲清楚啥是个webpack
- 第二篇：
- 一文大白话讲清楚webpack基本使用------1------完成webpack的初步构建
- 第三篇
- 一文大白话讲清楚webpack基本使用------2------css相关loader的配置和使用
- 第四篇
- 一文大白话讲清楚webpack基本使用------3------图像相关loader的配置和使用
- 第五篇
- 一文大白话讲清楚webpack基本使用------4------vue-loader的配置和使用
- 第六篇
- 一文大白话讲清楚webpack基本使用------5------babel的配置和使用
- 第七篇
- 一文大白话讲清楚webpack基本使用------6------热更新及其原理
- 第八篇
- 一文大白话讲清楚webpack基本使用------7------代码分离和懒加载
- 第九篇
- # 一文大白话讲清楚webpack基本使用------8------开发环境和生产环境的配置和区别
- 第十篇
- 一文大白话讲清楚webpack基本使用------9------预加载之prefetch和preload以及webpackChunkName的使用
- 第十一篇
- 一文大白话讲清楚webpack基本使用------10------使用CDN优化加载速度
- 第十二篇
- 一文大白话讲清楚webpack基本使用------11------chunkIds和runtimeChunk
- 第十三篇
- 一文大白话讲清楚webpack基本使用------12------文件指纹和缓存机制
- 第十四篇
- 一文大白话讲清楚webpack基本使用------13------Js代码压缩
- 第十五篇
- 一文大白话讲清楚webpack基本使用------14------CSS代码压缩
- 第十六篇
- 一文大白话讲清楚webpack基本使用------15------HTML代码压缩
- 第十七篇
- 一文大白话讲清楚webpack基本使用------16------图片压缩
- 第十八篇
- 一文大白话讲清楚webpack基本使用------17------Tree Shaking
- 然后看本篇，HappyPack
2. 啥是HappyPack
- Happy，快乐，pack，打包，HappyPack，快乐打包，意思以前打包不快乐，为啥不快乐，以前打包用啥，webpack，webpack打包为啥不快乐
- 因为webpack打包是单线程，但处理完这个再处理那个，所以不快乐
- 那HappyPack怎么就快乐了呢，因为人家可以实现并行处理，同步处理这个和那个，你就说快不快乐吧
- HappyPack可以将任务分解，派给多个子进程去处理，子进程处理完成后再将结果发送给主进程，从而减少构建时间
3. 怎么使用HappyPack
- 我们以打包csss为例
- 我们下载HappyPack插件，
js
nom install happypack- 然后在webpack.config.js里面引入
js
const HappyPack=require("happypack")
- 然后做以下两件事
- 更改loader
- 在使用HappyPack打包时，我们需要将对应的loader改为HappyPack/loader,通过id来指定
- 比如我们之前处理css时使用style-loader和css-loader
js
{
test:/\.css$/,
user:[MiniCssExtractPlugin.loader,'css-loader']
}- 使用HappyPack时改为使用happypack/loader?id=css-pack
js
{
test:/\.css$/,
user:['happypack/loader?id=css-pack']
}
- 然后在实例化的时候通过上面的idid=css-pack在指明我们这之前的loader->[MiniCssExtractPlugin.loader,'css-loader']
- 实例化happpack
- 每实例化一个happypack相当于开启一个进程，这就是多进程去处理的表现。然后我们在实例化的时候，通过上面的idid=css-pack在指明我们这之前的loader->[MiniCssExtractPlugin.loader,'css-loader']
js
new HappyPack({
id:'css-pack',//要更上面的id保持对应
loaders:[MiniCssExtractPlugin.loader,'css-loader']
})
- ok ,大功告成
- 其他模块比如js等都类似，大家自行上手，不懂得留言