一文大白话讲清楚webpack基本使用——18——HappyPack

文章目录

• 一文大白话讲清楚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插件，

nom install happypack

• 然后在webpack.config.js里面引入

const HappyPack=require("happypack")

• 然后做以下两件事

1. 更改loader

• 在使用HappyPack打包时，我们需要将对应的loader改为HappyPack/loader,通过id来指定
• 比如我们之前处理css时使用style-loader和css-loader

{
    test:/\.css$/,
        user:[MiniCssExtractPlugin.loader,'css-loader']
}

• 使用HappyPack时改为使用happypack/loader?id=css-pack

{
    test:/\.css$/,
        user:['happypack/loader?id=css-pack']
}

• 然后在实例化的时候通过上面的idid=css-pack在指明我们这之前的loader->[MiniCssExtractPlugin.loader,'css-loader']

2. 实例化happpack

• 每实例化一个happypack相当于开启一个进程，这就是多进程去处理的表现。然后我们在实例化的时候，通过上面的idid=css-pack在指明我们这之前的loader->[MiniCssExtractPlugin.loader,'css-loader']

 new HappyPack({
    id:'css-pack',//要更上面的id保持对应
    loaders:[MiniCssExtractPlugin.loader,'css-loader']
})

• ok ,大功告成
• 其他模块比如js等都类似，大家自行上手，不懂得留言