Webpack worker-loader遇编译错误静默失败问题求助

我刚好碰到过类似的坑，给你梳理下问题根源和解决办法：

问题根源 #

worker-loader在Webpack 4中会把.worker.js文件打包成独立的Chunk，而CRA eject后的生产构建配置里，ESLint校验默认只覆盖了主入口的常规模块，没有对Worker专属的Chunk做强制校验。再加上你之前需要手动加注释禁用ESLint错误（因为它识别不了Worker全局变量），这就导致Worker里的ESLint问题被完全忽略，生产构建会“假成功”，只输出少量文件。

分步解决方案 #

1. 先让ESLint识别Worker全局变量（不用再手动加注释） #

首先解决ESLint不认识Worker专属全局变量的问题，避免每次都要加注释禁用错误。修改你的ESLint配置文件（比如.eslintrc.js或者package.json里的eslintConfig字段），添加worker环境：

// .eslintrc.js 示例
module.exports = {
  // 其他已有配置...
  env: {
    browser: true,
    es6: true,
    // 添加这一行，让ESLint识别Worker全局变量（self、postMessage等）
    worker: true
  }
};

这样ESLint就不会再对Worker里的全局变量报错了，不用再写/* eslint-disable */之类的注释。

2. 强制Webpack对Worker文件做ESLint校验并中断错误构建 #

接下来要让Webpack在生产构建时，对Worker文件执行ESLint校验，并且一旦有错误就直接中断构建，而不是静默忽略。

在config/webpack.config.prod.js里找到module.rules数组，在你的worker-loader配置之前，添加一个enforce: 'pre'的ESLint规则，确保它在worker-loader处理文件之前执行：

module: {
  strictExportPresence: true,
  rules: [
    // 新增：针对Worker文件的ESLint前置校验
    {
      test: /\.worker\.js$/,
      enforce: 'pre', // 强制在其他loader之前执行
      use: [
        {
          loader: require.resolve('eslint-loader'),
          options: {
            formatter: require.resolve('react-dev-utils/eslintFormatter'),
            eslintPath: require.resolve('eslint'),
            emitError: true, // 把lint错误转为构建错误抛出
            emitWarning: false,
            failOnError: true, // 只要有lint错误就中断构建
          },
        },
      ],
    },
    // 你的原有worker-loader配置
    { test: /\.worker\.js$/, loader: 'worker-loader' },
    // 其他原有规则...
  ]
}

这里的关键是enforce: 'pre'——它会让ESLint在worker-loader编译Worker文件之前就完成校验，一旦发现错误就直接终止生产构建，不会让错误被“隐藏”在独立Chunk的编译流程里。

3. 验证效果 #

现在故意在你的Worker文件里留一个ESLint错误（比如使用一个未定义的变量），执行npm run build，你会看到构建直接抛出错误并终止，而不是假装成功了。

额外说明 #

如果是Worker文件本身的Webpack编译错误（比如语法错误），worker-loader在生产构建时应该会正常报错，但你遇到的是ESLint层面的问题，所以重点就是让ESLint覆盖Worker文件，并且把lint错误升级为构建错误。

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