我正在使用Symfony Webpack Encore和带有React的TypeScript。
使用yarn encore dev --watch运行编译时，编译器处于无限编译循环中。
我添加了一个webpack插件，它可以告诉我哪些文件导致了新的编译。

class WatchRunPlugin {
    apply(compiler) {
        compiler.hooks.watchRun.tap("WatchRun", (comp) => {
            const changedFiles = Object.keys(comp.watchFileSystem.watcher.mtimes)
                .map((file) => `\n  ${file}`)
                .join("");
            if (changedFiles.length) {
                console.log("====================================");
                console.log("NEW BUILD FILES CHANGED:", changedFiles);
                console.log("====================================");
            }
        });
    }
}

config.plugins = [...config.plugins, new WatchRunPlugin()];

输出：

WAIT  Compiling...                                                                                                                                                                        10:55:37 AM

====================================
NEW BUILD FILES CHANGED: 
  /workspace/src/public/build/manifest.json
  /workspace/src/public/build/vendor.js
====================================
 DONE  Compiled successfully in 4634ms                                                                                                                                                     10:55:43 AM

 I  9 files written to public/build
 WAIT  Compiling...                                                                                                                                                                        10:55:43 AM

====================================
NEW BUILD FILES CHANGED: 
  /workspace/src/public/build/manifest.json
  /workspace/src/public/build/vendor.js
====================================
 DONE  Compiled successfully in 4399ms                                                                                                                                                     10:55:49 AM

 I  9 files written to public/build

所以它总是看到自己生成的文件更新，所以它想重新编译。
我的tsconfig-base.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "declaration": true,
        "noImplicitAny": false,
        "composite": true,
        "jsx": "react",
        "sourceMap": true,
        "noLib": false,
        "skipLibCheck": true,
        "baseUrl": ".",
        "suppressImplicitAnyIndexErrors": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "types": []
    },
    "compileOnSave": true,
    "exclude": ["node_modules", "vendor"]
}

我的tsconfig.json

{
    "extends": "./tsconfig-base.json",
    "compilerOptions": {
      "composite": false,
      "baseUrl": "./frontend",
      "paths": {
        "base-platform": [
          "/workspace/src/frontend"
        ],
        "base-plugin-core": [
          "/workspace/src/plugins/plugin-core/frontend"
        ],
        "base-plugin-crm": [
          "/workspace/src/plugins/plugin-crm/frontend"
        ],
        "base-plugin-skeleton": [
          "/workspace/src/plugins/plugin-skeleton/frontend"
        ]
      }
    },
    "include": [
      "src/frontend/*.ts",
      "src/frontend/*.tsx"
    ]
  }

我的webpack. config文件

// webpack.config.js
let Encore = require("@symfony/webpack-encore");
let path = require("path");

Encore
    .setOutputPath("public/build/")
    .setPublicPath("http://localhost:8101/build")
    .setManifestKeyPrefix("build/")
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableTypeScriptLoader()
    .enableReactPreset()
    .enableSassLoader()
    .enableSingleRuntimeChunk()
    .createSharedEntry("vendor", "./frontend/shared_entries.js")
    .addEntry("app", "./plugins/plugin-core/frontend/Component/App/App.tsx")
    .configureWatchOptions((watchOptions) => {
        watchOptions.poll = 250;
    });

let config = Encore.getWebpackConfig();

config.devServer = {
    host: "0.0.0.0",
    port: 8101,
    contentBase: path.join(__dirname, "public/"),
    publicPath: "localhost:8101/build/",
    disableHostCheck: true,
    hotOnly: true,
};

class WatchRunPlugin {
    apply(compiler) {
        compiler.hooks.watchRun.tap("WatchRun", (comp) => {
            const changedFiles = Object.keys(comp.watchFileSystem.watcher.mtimes)
                .map((file) => `\n  ${file}`)
                .join("");
            if (changedFiles.length) {
                console.log("====================================");
                console.log("NEW BUILD FILES CHANGED:", changedFiles);
                console.log("====================================");
            }
        });
    }
}

config.plugins = [...config.plugins, new WatchRunPlugin()];
module.exports = config;

我还尝试了watcher中的“ignored”选项，如下所示，但结果还是一样

.configureWatchOptions((watchOptions) => {
        watchOptions.poll = 250;
        watchOptions.ignored = [
            "/../.git",
            "**.php",
            "tsconfig.json",
            "webpack.config.js",
            "public/plugins.json",
            "node_modules/**",
            "var/**",
            "public/",
            "*.log"
        ];
    });