webpack HappyPack多个进程处理loader

文章目录

文章参考
什么是HappyPack? 作用是什么？
- HappyPack的基本原理?
使用案例
- 安装依赖库
- webpack.config.js 配置如何使用 happypack
- - 配置说明
webpack配置问题：HappyPack: plugin for the loader '1' could not be found？

文章参考

roadhog 构建优化
深入浅出的webpack构建工具—HappyPack优化构建(九)

什么是HappyPack? 作用是什么？

Webpack是允许在NodeJS中的，它是单线程模型的，因此webpack在构建文件时，比如js，css，图片及字体时，它需要一个一个去解析和编译，不能同时处理多个任务。
特别当文件数量变多后，webpack构建慢的问题会显得更为严重。
因此HappyPack出现了，它能让webpack同时处理多个任务，它将任务分解给多个子进程去并发执行，子进程处理完成后再将结果发送给主进程中。

HappyPack的基本原理?

在webpack构建过程中，我们需要使用Loader对js，css，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大的，且这些转换操作不能并发处理文件，而是需要一个个文件进行处理，HappyPack的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间。

使用案例

安装依赖库

cnpm i -D happypack

webpack.config.js 配置如何使用 happypack

在plugin中配置happypack实例
在loader中使用 happypack 创建的进程


// 引入HappyPack插件
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length});
console.log("happyThreadPool:" + happyThreadPool)// 构造出共享进程池，在进程池中包含 5 个子进程
// const happyThreadPool = HappyPack.ThreadPool({ size : 5 }) ;module.exports = {mode: "development",// mode: "production",entry: {main: "./main.js"// lodash: './src/template/lodash.js'},output: {path: path.resolve(__dirname, "dist"),filename: "main.js"},resolve: {// 定义路径别名alias: {"@": path.resolve(__dirname, "./"),// @src 代表 “工程目录/src”"@src": path.resolve(__dirname, "./src"),// @component 代表 “工程目录/src/components”"@component": path.resolve(__dirname, "./src/components")},// 指定第三方模块加载的路径，例如 jquery 、lodash等modules: ["node_modules", "./lib/components"],// 如果引入的文件没有后缀名，默认会优先去找 js文件，如果没有就去找 ts文件，如果没有就找json文件，依次类推，默认是 jsextensions: [".js", ".ts", ".json"]},module: {rules: [{test: /\.js$/,// 排除 node_modules 和 bower_components 下的文件exclude: /(node_modules|bower_components)/,use: {// loader: "babel-loader",loader: 'happypack/loader?id=babel',// options: {//   presets: [//     [//       "@babel/preset-env",//       {//         // 只引用使用了新特性 polyfill//         // useBuiltIns: 'usage'//       }//     ]//   ]// }}},{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,use: {loader: "file-loader",options: {esModule: false, // 这里设置为falseoutputPath: "fonts/", // 指定字体输入的文件夹，打包地址是 “/dist/fonts/字体文件”publicPath: "/fonts" // 指定字体的路径，即打包结果引入的地址是 "/fonts/字体文件名"}}},{test: /\.(png|jpg|gif)$/,use: [{loader: 'happypack/loader?id=image',// loader: "url-loader",// options: {//   esModule: false, // 这里设置为false//   outputPath: "images/", // 指定图片输入的文件夹， 打包地址是 “/dist/images/图片名字”//   publicPath: "/images", // 指定获取图片的路径，即打包结果引入的地址是 "/images/图片名字"//   // limit  (如果小于 8192字节 ，则转为base64，否则返回一个url地址)//   limit: 8192,//   name: "[name].[hash:8].[ext]" // 输入的图片名// }}]},{test: /\.(scss|css)$/,/*** loader 是从又向做执行* 1. 最先执行 sass-loader ，将 sass 文件转为css* 2. css-loader 将转换后的css文件转为 js模块* 3. style-loader 将 css 插入到HTML中的<style>标签中*/use: [devMode? {loader: "style-loader" // 将 JS 字符串生成为 style 节点}: MiniCssExtractPlugin.loader,{// loader: "css-loader" // 将 CSS 转化成 CommonJS 模块loader: 'happypack/loader?id=css-pack' // 将 CSS 转化成 CommonJS 模块},{loader: "sass-loader" // 将 Sass 编译成 CSS}]// 等价于// use: ["style-loader", "css-loader", "sass-loader"]}]},plugins: [new CleanWebpackPlugin(), //删除上次打包文件，默认目录'./dist'/****   使用HappyPack实例化    *****/new HappyPack({// 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件id: 'babel',// 使用共享进程池中的子进程去处理任务。// threadPool: happyThreadPool,// 如何处理.js文件，用法和Loader配置是一样的loaders: [{loader: 'babel-loader',options: {presets: [["@babel/preset-env",{// 只引用使用了新特性 polyfill// useBuiltIns: 'usage'}]]}}]}),new HappyPack({id: 'image',// threadPool: happyThreadPool,loaders: [{loader: 'url-loader',options: {esModule: false, // 这里设置为falseoutputPath: "images/", // 指定图片输入的文件夹， 打包地址是 “/dist/images/图片名字”publicPath: "/images", // 指定获取图片的路径，即打包结果引入的地址是 "/images/图片名字"// limit  (如果小于 8192字节 ，则转为base64，否则返回一个url地址)limit: 8192,name: "[name].[hash:8].[ext]" // 输入的图片名}}]}),// 处理css文件new HappyPack({id: 'css-pack',// threadPool: happyThreadPool,loaders: [{loader: 'css-loader'}]})],};

配置说明

happypack/loader?id=xx 紧跟的id=xxx,就是告诉happy-loader选择哪个happyPack的实列处理文件。
在plugin插件配置中新增了HappyPack的实列，作用是告诉HappyPack如何处理该文件

webpack配置问题：HappyPack: plugin for the loader ‘1’ could not be found？

用了 happypack 之后，不能在 rules 里面的相关 loader 中配置 options，相反只能在 happypack 插件中配置 options！

webpack HappyPack多个进程处理loader相关推荐

webpack源码分析之三：loader
前言在webpack特性里面,它可以支持将非javaScript文件打包,但前面写到webpack的模块化打包只能应用于含有特定规范的JavaScript文件.本次介绍的loader则是用来解决这类 ...
Webpack4 HappyPack增加编译进程数
1.HappyPack 在用Webpack构建项目时有大量文件需要解析和处理,构建过程是文件读写和计算密集型的操作(特别是当文件数量变多后),Webpack 构建慢的问题会显得严重. 运行在 Node ...
webpack实战之手写一个loader和plugin
webpack实战之编写一个简易的loader和plugin
webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004
然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...
Webpack升级优化小记：happyPack+dll初体验
最近学习了webpack4的使用,并尝试了对项目webpack进行升级和优化,记录一下此次升级的一些实践过程. 痛苦的开发体验漫长的等待项目在2016年引入了webpack作为打包工具,并使用vu ...
Loader 入门【Webpack Book 翻译】
原文链接:https://survivejs.com/webpack... 翻译计划:https://segmentfault.com/a/11... 附言:因为发现书中一些内容单独放出来会比较尴尬, ...
webpack loader的套路
学习webpack loader,最后模拟style-loader.less-loader 什么是loader loader是一个函数,用来把文件转换成webpack识别的模块. loader API ...
webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现参数同步loader 异步loader Raw loader Pitching loader loader ...
vue-cli Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...

webpack HappyPack多个进程处理loader

文章目录

文章参考

什么是HappyPack? 作用是什么？

HappyPack的基本原理?

使用案例

安装依赖库

webpack.config.js 配置如何使用 happypack

配置说明

webpack配置问题：HappyPack: plugin for the loader ‘1’ could not be found？

webpack HappyPack多个进程处理loader相关推荐

最新文章

热门文章