Webpack 5.73.0编译成功后陷入无限循环问题求助

执行npm run dev（对应命令webpack --mode development --watch）时，编译成功后项目陷入无限循环卡顿。当前环境：React 18、webpack@5.73.0、webpack-cli@5.0.1，Webpack配置如下：

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ],
};

核心原因：输出目录被watch监听，触发循环编译 #

Webpack的watch模式默认会监听项目根目录下所有文件变化，包括你的输出目录./static/frontend。每次编译完成后，生成的main.js会被watch检测到变化，进而触发新一轮编译，形成无限循环。

解决方案1：配置watchOptions排除输出目录 #

修改Webpack配置，添加watchOptions忽略输出目录：

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  // 添加watchOptions排除输出目录
  watchOptions: {
    ignored: [path.resolve(__dirname, "./static/frontend")]
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ],
};

解决方案2：移除冗余配置，减少潜在冲突 #

1. 移除DefinePlugin中对NODE_ENV的设置：使用--mode development时，Webpack已经自动将NODE_ENV设为development，重复设置可能引发不必要的问题。
2. 开发模式下关闭minimize：--mode development默认optimization.minimize为false，手动开启会增加编译时间，也可能间接触发watch循环。

优化后的配置：

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  watchOptions: {
    ignored: [path.resolve(__dirname, "./static/frontend")]
  },
  optimization: {
    minimize: false,
  },
};

额外检查点 #

• 确认项目中没有其他工具（如ESLint、文件同步工具）在修改输出目录下的文件，这类操作也会触发watch循环。
• 检查babel-loader配置是否正确，确保没有意外编译输出目录的文件（当前配置已排除node_modules，且输出目录不在src下，大概率没问题）。

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