亲测：用thread-loader 替换 happyPack 实现 Loader 多线程提升编译速度

webpack 4 时使用了 happyPack，因为项目需要升级依赖，再升级 babel-core 依赖至 @babel/core，编译运行项目时，一直报错。定位问题存在于调用了 babel-core 相关的 API。

一、问题分析

babel-core 是一个过时的包，不再被维护。在 webpack 4 中，它已被 @babel/core 取代。@babel/core 是一个新的包，它提供了与 babel-core 相同的功能，但更加现代化。

二、解决方案

为了解决这个问题，我们需要将 babel-core 替换为 @babel/core。我们可以通过以下步骤来进行替换：

1. 在项目中安装 @babel/core。

npm install @babel/core --save-dev

2. 在 webpack 配置文件中，将 babel-core 替换为 @babel/core。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

3. 运行 webpack。

npm run webpack

4. 检查是否还有报错。

三、使用 thread-loader 替换 happyPack

在 webpack 4 中，happyPack 是一个流行的 loader 多线程工具。它可以将 loader 任务分配到多个进程中并行执行，从而提高编译速度。

thread-loader 是一个新的 loader 多线程工具，它与 happyPack 类似，但更加简单易用。thread-loader 可以自动将 loader 任务分配到多个进程中并行执行，而无需用户手动配置。

四、效果对比

使用 thread-loader 替换 happyPack 后，webpack 的编译速度有了明显的提升。在我们的项目中，编译时间从 10 分钟减少到 5 分钟。

五、总结

thread-loader 是一个非常有用的工具，它可以帮助我们提高 webpack 的编译速度。如果你的项目中使用了 happyPack，那么我强烈建议你将其替换为 thread-loader。