typescript - Webpack Encore 监视不需要的文件（例如日志文件）并卡在无限编译循环中

我正在使用 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.js

// 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;

我也在监视器中尝试了“忽略”选项，如下所示，但结果仍然相同

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

答案＃1

我发现使用通配符模式的性能最好。目录位置似乎也很重要。
你可能想尝试类似这样的东西

    .configureWatchOptions((watchOptions) => {
        watchOptions.poll = 250;
        watchOptions.ignored = [
            "**/*.php",
            "**/node_modules",
            "**/public",
            "**/var",
            "**/vendor",
            "**/*.log",
        ];
    });