深入浅出的webpack构建工具---HappyPack优化构建(九)
2018-08-30 19:57 龙恩0707 阅读(9605) 评论(1) 编辑 收藏 举报阅读目录
一：什么是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 }) ] };
