安装

cnpm install happypack --save

配置

在webpack.config.js里面（也可以是webpack.base.conf.js）
-引入

  const HappyPack = require('happypack');

-替换

module.exports = {
   ...
   module: {
       rules: [
           test: /\.js$/,
           // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
           // 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
           use: ['happypack/loader?id=babel'],
           // 排除 node_modules 目录下的文件
           exclude: /node_modules/
       ]
   }
}

-创建HappyPack插件

const HappyPack = require('happypack');

module.exports = {
    module: {
        rules: [
            test: /\.js$/,
            // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
            // 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
            use: ['happypack/loader?id=babel'],
            // 排除 node_modules 目录下的文件
            exclude: /node_modules/
        ]
    },
    plugins: [
        new HappyPack({
            /*
             * 必须配置
             */
            // id 标识符，要和 rules 中指定的 id 对应起来
            id: 'babel',
            // 需要使用的 loader，用法和 rules 中 Loader 配置一样
            // 可以直接是字符串，也可以是对象形式
            loaders: ['babel-loader?cacheDirectory']
        })
    ]
}

在demo里面happypack的速度显示不出来，但是在大型项目里面，会看到明显的构建速度的提升