閱讀目錄
一：什麼是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 }) ] };