阅读目录

一:什么是HappyPack? 作用是什么?

二:如何在配置中使用HappyPack?

一:什么是HappyPack? 作用是什么?

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

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

二:如何在配置中使用HappyPack?

还是和之前一样,在使用happyPack之前,我们来看下项目的整个目录结构如下:

### 目录结构如下:
HappyPack # 工程名
| |--- dist # 打包后生成的目录文件
| |--- node_modules # 所有的依赖包
| |--- js # 存放所有js文件
| | |-- demo1.js
| | |-- main.js # js入口文件
| |--- webpack.config.js # webpack配置文件
| |--- webpack.dll.config.js # 打包第三方依赖的库文件
| |--- index.html # html文件
| |--- styles # 存放所有的css样式文件
| | |-- main.styl # main.styl文件
| | |-- index.styl
| |--- .gitignore
| |--- README.md
| |--- package.json
| |--- .babelrc # babel转码文件

js/main.js 入口文件代码如下:

require('../styles/main.styl');

const $ = require('jquery');
$('#app').html('欢迎你来我的博客'); console.log('这是main.js');
require('./demo1.js');

js/demo1.js 文件如下:

export default function printMe() {
console.log('11111111');
}

styles/main.styl 代码如下:

@import "./index.styl";
#app
font-size 18px
width 200px
height 200px
display flex
border 1PX solid #ccc

styles/index.styl 代码如下:

body
font-size 12px

2.1 安装HappyPack插件

安装命令如下:

npm i -D happypack

2.2 配置HappyPack

首先在webpack中引入happyPack, 如下代码:

// 引入HappyPack插件
const HappyPack = require('happypack');

然后对js模块编译不使用 HappyPack, 是如下配置:

module.exports = {
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules') // 排除文件
}
]
}
}

使用 HappyPack 配置,变成如下:

module.exports = {
module: {
rules: [
{
test: /\.js$/,
// 将对.js文件的处理转交给id为babel的HappyPack的实列
use: ['happypack/loader?id=babel'],
exclude: path.resolve(__dirname, 'node_modules') // 排除文件
}
]
}
};

然后在plugins配置如下:

module.exports = {
plugins: [
/**** 使用HappyPack实例化 *****/
new HappyPack({
// 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
id: 'babel',
// 如何处理.js文件,用法和Loader配置是一样的
loaders: ['babel-loader']
})
]
}

因此所有的webpack配置代码如下:

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 清除dist目录下的文件
// const ClearWebpackPlugin = require('clean-webpack-plugin'); const webpack = require('webpack'); // 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin'); // 引入HappyPack插件
const HappyPack = require('happypack'); module.exports = {
// 入口文件
entry: {
main: './js/main.js'
},
output: {
filename: '[name].js',
// 将输出的文件都放在dist目录下
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
// 使用正则去匹配
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader'
},
use: [
{
loader: 'css-loader',
options: {}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-cssnext')(),
require('cssnano')(),
require('postcss-pxtorem')({
rootValue: 16,
unitPrecision: 5,
propWhiteList: []
}),
require('postcss-sprites')()
]
}
},
{
loader: 'stylus-loader',
options: {}
}
]
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['happypack/loader?id=css-pack']
})
},
{
test: /\.(png|jpg)$/,
/*
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]'
}
*/
use: ['happypack/loader?id=image']
},
{
test: /\.js$/,
// 将对.js文件的处理转交给id为babel的HappyPack的实列
use: ['happypack/loader?id=babel'],
// loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules') // 排除文件
}
]
},
resolve: {
extensions: ['*', '.js', '.json']
},
devtool: 'cheap-module-eval-source-map',
devServer: {
// contentBase: path.join(__dirname, "dist"),
port: 8081,
host: '0.0.0.0',
headers: {
'X-foo': '112233'
},
// hot: true,
inline: true,
// open: true,
overlay: true,
stats: 'errors-only'
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版文件
}),
// new ClearWebpackPlugin(['dist']),
new ExtractTextPlugin({
// 从js文件中提取出来的 .css文件的名称
filename: `main.css`
}),
// 告诉webpack使用了哪些第三方库代码
new DllReferencePlugin({
context: path.join(__dirname),
// jquery 映射到json文件上去
manifest: require('./dist/jquery.manifest.json')
}),
new DllReferencePlugin({
context: path.join(__dirname),
// echarts 映射到json文件上去
manifest: require('./dist/echarts.manifest.json')
}), /**** 使用HappyPack实例化 *****/
new HappyPack({
// 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
id: 'babel',
// 如何处理.js文件,用法和Loader配置是一样的
loaders: ['babel-loader']
}),
new HappyPack({
id: 'image',
loaders: [{
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: '[name].[ext]'
}
}]
}),
// 处理css文件
new HappyPack({
id: 'css-pack',
loaders: ['css-loader']
})
]
};

如上配置代码:
1. 在Loader配置中,对所有的文件的处理都交给了happypack/loader(除了styl中使用postcss外,对这个处理貌似会报错),happypack/loader?id=xx 紧跟的id=xxx,就是告诉happy-loader选择哪个happyPack的实列处理文件。

2. 在plugin插件配置中新增了HappyPack的实列,作用是告诉HappyPack如何处理该文件,如下代码:

module.exports = {
plugins: [
new HappyPack({
// 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
id: 'babel',
// 如何处理.js文件,用法和Loader配置是一样的
loaders: ['babel-loader']
})
]
}

HappyPack实列中的id属性会和 happypack/loader?id=xxx 中的xxx对应,HappyPack实列中除了有 id 和 loaders两个属性外,还有如下几个属性:
threads: 代表开启几个子进程去处理这一类文件,默认是3个,必须是整数。
verbose: 是否允许HappyPack输出日志,默认为true。
threadPool: 代表共享进程池。即多个HappyPack实列都使用同一个共享进程池中的子进程去处理任务。以防止资源占用过多。比如如下代码:

const HappyPack =require (’happypack’);
// 构造出共享进程池,在进程池中包含 5 个子进程
const happyThreadPool = HappyPack.ThreadPool({ size : 5 )) ; module.exports = {
plugins: [
new HappyPack({
// 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
id: 'babel',
// 如何处理.js文件,用法和Loader配置是一样的
loaders: ['babel-loader'],
// 使用共享进程池中的子进程去处理任务。
threadPool: happyThreadPool
})
]
};

github demo查看

深入浅出的webpack构建工具---HappyPack优化构建(九)的更多相关文章

  1. 深入浅出的webpack构建工具---ParallelUglifyPlugin优化压缩(十)

    webpack默认提供了UglifyJS插件来压缩JS代码,但是它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩.所以说在正式环境打包压缩代码速度非常慢(因为压缩JS ...

  2. 深入浅出的webpack4构建工具--webpack4+react构建环境(二十)

    下面我们来配置下webpack4+react的开发环境,之前都是针对webpack4+vue的.下面我们也是在之前项目结构的基础之上进行配置下. 首先看下如下是我为 webpack4+react 基本 ...

  3. Visual Studio Code初识与自动化构建工具安装

    1.Visual Studio Code如何新建文件夹 要自己手动在本地新建,然后再点击文件->打开文件夹即可. 之后你就可以任意添加文件了 2.如何使用自动化构建工具 通过自动化构建工具,用户 ...

  4. Java项目工程化之项目构建工具Maven

    欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...

  5. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  6. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

  7. 深入浅出的webpack构建工具---AutoDllPlugin插件(八)

    深入浅出的webpack构建工具---AutoDllPlugin插件(八) DllPlugin插件能够快速打包,能把第三方依赖的文件能提前进行预编译打包到一个文件里面去.提高了构建速度.因为很多第三方 ...

  8. 深入浅出的webpack构建工具---DevServer配置项(二)

    深入浅出的webpack构建工具---DevServer配置项(二) 阅读目录 DevServer配置项 1. contentBase 2. port 3. host 4. headers 5. hi ...

  9. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

随机推荐

  1. Java框架之Spring(二)

    前一篇博客讲述了Spring的一些基础概念,下面我们来创建第一个Spring程序吧. 步骤如下: 1) 导包 2) 配置文件 附没有提示的情况 MyEclipse ->File and Edit ...

  2. java导出excel时合并同一列中相同内容的行

    一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然 ...

  3. 【协议】3、HTTP 协议入门

    HTTP 协议是互联网的基础协议,也是网页开发的必备知识,最新版本 HTTP/2 更是让它成为技术热点. 本文介绍 HTTP 协议的历史演变和设计思路. 一.HTTP/0.9 HTTP 是基于 TCP ...

  4. C# Why does '+' + a short convert to 44

    I have a line of code that looks like this: MyObject.PhoneNumber = '+' + ThePhonePrefix + TheBizNumb ...

  5. APP接口做什么?

    提交数据:GET POST 有的接口是获取数据和提交数据相结合形式:如检测更新下载

  6. 【代码笔记】Web-ionic-按钮

    一,效果图. 二,代码.index.html文件如下所示. <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  8. Mysql存储引擎特性总结

    几个常用存储引擎的特点 下面我们重点介绍几种常用的存储引擎并对比各个存储引擎之间的区别和推荐使用方式. 特点 Myisam BDB Memory InnoDB Archive 存储限制 没有 没有 有 ...

  9. python练习(-)

    简单的爬虫示例: import urllib.request #python2.x版本为urllib2url = 'http://www.douban.com/'webPage=urllib.requ ...

  10. python第五十天--paramiko

    python通过paramiko实现,ssh功能 import paramiko ssh =paramiko.SSHClient()#创建一个SSH连接对象 ssh.set_missing_host_ ...