React项目Webpack打包耗时超10分钟，卡在等待完成阶段求助

• 重点排查公共配置文件 webpack.common.config.js
  当前配置基于公共配置合并，问题大概率出在公共配置中：

  • 确认是否在开发环境开启了不必要的代码压缩/混淆插件（如TerserPlugin、CssMinimizerPlugin），这类插件会大幅拉长打包时间，建议仅在生产环境启用。
  • 检查entry配置是否误引入了超大依赖或整个目录（比如entry: './src/**/*'这类错误写法），导致Webpack需要处理海量文件。
  • 查看module.rules里的loader范围，比如babel-loader是否未设置include，导致遍历了node_modules文件。正确做法是限制loader仅处理业务代码目录：

    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          include: path.resolve(__dirname, 'src'),
          exclude: /node_modules/
        }
      ]
    }
    

• 更换开发环境的source-map类型
  当前使用的devtool: 'source-map'会生成完整的外部source map，耗时极长。开发环境建议替换为更快的类型：

  • devtool: 'eval-cheap-module-source-map'：兼顾源码映射清晰度与打包速度，是开发环境的最优选择之一。
  • 若追求极致速度，可使用devtool: 'eval'，仅牺牲少量源码映射精度。

• 排查项目文件与依赖问题

  • 检查项目中是否存在超大文件（如几MB的JSON、未压缩图片），这类文件会占用大量打包时间，建议用asset-module或url-loader做单独打包或转base64处理。
  • 执行webpack --profile --json > stats.json生成打包统计文件，分析耗时最长的模块或插件，针对性优化。
  • 删除node_modules与锁文件（package-lock.json/yarn.lock）后重新安装依赖，排除依赖损坏或版本冲突的可能。

• 优化DevServer监听范围

  • 当前devServer.static.directory设为项目根目录__dirname，Webpack会监听所有文件变化（包括node_modules、dist等无关目录），建议缩小到静态资源或业务目录：

    static: {
      directory: path.resolve(__dirname, 'public'),
      publicPath: '/summary/'
    }
    

  • 开启watchOptions.ignored忽略无需监听的目录：

    devServer: {
      // ...其他配置
      watchOptions: {
        ignored: /node_modules/
      }
    }
    

• 其他排查方向

  • 暂时关闭热更新（HMR）测试，排查是否因热更新配置错误导致进程卡住。
  • 确认本地Node.js版本为LTS版本（如16.x、18.x），版本过高或过低可能导致Webpack运行异常。

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