### 目录结构如下：
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转码文件

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

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

@import "./index.styl";
#app font-size 18pxwidth 200pxheight 200pxdisplay flexborder 1PX solid #ccc

body font-size 12px

npm i -D happypack

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

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

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

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

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']})]
};

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

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})]
};