webpack4 搭配worker-loader与MiniCssExtractPlugin报Callback报错

你遇到的Callback was already called报错，是webpack4生态下worker-loader@2.0.0与mini-css-extract-plugin@0.8.0的已知版本兼容冲突，结合你的配置场景，完整触发链路为：

• worker-loader@2.0.0 处理worker入口时，会为worker代码生成独立的隔离编译上下文，执行过程中会重复触发同一模块的loader链调用；
• mini-css-extract-plugin@0.8.0 的内置异步回调没有做幂等判断，当被worker的独立编译上下文重复调用时，同一个回调会被执行两次，直接触发neo-async库的重复回调抛错；
• 你的配置进一步放大了这个冲突：你把my-custom-library整个路径纳入了babel-loader的处理范围，这个库同时被主业务模块、worker模块双向引用，等于库内代码（包括附带的antd样式资源）会同时在主包上下文、worker隔离上下文走完整的loader链，刚好踩中两个插件的状态锁雷区。

这也对应你之前的验证结果：单独移除任意一个插件，编译流程都不会出现跨上下文的重复回调，所以能正常构建；但这两种调整都会破坏运行时功能——移除worker-loader就没法在独立线程跑自定义库逻辑，移除MiniCssExtractPlugin.loader就会失去css抽取为独立文件的能力，引发页面样式加载、性能相关的问题。

按照改动量从小到大排序，可直接替换现有webpack配置：

• 拆分css规则的执行逻辑，跳过worker场景的css抽取
  worker本质是纯JS执行环境，不支持DOM操作，在worker里处理antd样式本身就是无意义的计算，可以直接在worker编译链路里丢弃css资源，避免MiniCssExtractPlugin被跨上下文重复调用：

  {
    test: /\.(css|less)$/,
    use: [
      // worker编译链路下直接跳过css抽取，其他场景正常使用MiniCssExtractPlugin
      process.env.WEBPACK_BUILD_TYPE === 'worker' 
        ? 'null-loader' 
        : { loader: MiniCssExtractPlugin.loader },
      { loader: 'css-loader' },
      {
        loader: 'less-loader',
        options: {
          modifyVars: {
            'primary-color': '#5f9cd1',
            'link-color': '#1890ff',
          },
          javascriptEnabled: true,
        }
      }
    ]
  }
  

• 调整worker-loader的编译模式，减少独立上下文的重复初始化
  给worker-loader增加内联配置，让worker代码跟随主包一起编译，避免生成独立的编译触发链路：

  {
    test: /\.worker\.ts$/,
    exclude: /node_modules/,
    use: [
      'babel-loader',
      {
        loader: 'worker-loader',
        options: {
          inline: 'fallback',
          publicPath: '/'
        }
      }
    ]
  }
  

• 缩小自定义库的babel处理范围
  不要把整个node_modules/my-custom-library路径都纳入include，仅匹配库内实际需要转译的JS/TS文件路径，排除库内的样式资源路径，从源头减少跨上下文重复执行loader的概率。
• 兼容版本升级
  如果以上调整仍存在报错，可以将mini-css-extract-plugin升级至0.9.x版本，这个版本专门修复了webpack4环境下多编译上下文重复调用回调导致的抛错问题，无需改动原有业务逻辑即可兼容worker-loader@2.0.0。

内容的提问来源于stack exchange，提问作者ghoti143