用过HappyPack吗？HappyPack有什么优点?

[artdong]

用过HappyPack吗？HappyPack有什么优点?

[artdong]

由于 JavaScript 是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。

由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。

我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

HappyPack makes initial webpack builds faster by transforming files in parallel（HappyPack通过并行转换文件使webpack编译更快）。

future：Webpack 4 and thread-loader

[artdong]

Usage

npm install --save-dev happypack

const os = require('os');
const HappyPack = require('happypack');

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

const happypackClients = [
    new HappyPack({
        id: 'js',
        loaders: ['babel-loader'],
        threadPool: happyThreadPool
    }),
    new HappyPack({
        id: 'jsx',
        loaders: [{
            loader: 'babel-loader',
            query: {
                presets: ['react']
            }
        }],
        threadPool: happyThreadPool
    }),
    new HappyPack({
        id: 'styles',
        loaders: ['css-loader', 'less-loader'],
        threadPool: happyThreadPool
    })
];

module.exports = {
    entry: './app/build/app.jsx',
    output: {
        path: path.resolve(__dirname, './app/public/static/' + pkg.name + '/'),
        filename: 'app.[chunkhash:8].min.js',
        chunkFilename: 'chunk.[name].[chunkhash:8].min.js',
        publicPath: '/' + pkg.name + '/'
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                loader: 'happypack/loader?id=js'
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'happypack/loader?id=jsx'
            },
            {
                test: /\.(less|css)$/,
                use: ExtractTextPlugin.extract({
                    use: ['happypack/loader?id=styles']
                })
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': env
            }
        }),
        new HtmlWebpackPlugin({
            inject: false,
            filename: '../../views/index.html',
            template: './app/build/views/index.html'
        }),
        ...happypackClients,
        extractLESS
    ]
};