深入浅出的webpack构建工具---HappyPack优化构建(九)
2018-08-30 19:57 龙恩0707 阅读(9569) 评论(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 }) ] };