Javascript 当检测到文件更改时，为什么webpack没有运行所有插件？

我正在使用webpack和

watch=true

将把手文件编译成

/dist

文件夹中的HTML文件

handlebarswebackplugin

在修改

.hbs

文件时运行，但我也希望它在修改JSON文件时运行。JSON文件包含编译为HTML时传递给Handlebar模板的数据

我添加了一个名为

webpack-watch-files-plugin

的插件，认为它可以监视JSON文件，并在检测到更改时重新运行整个构建，但它没有

有人能解释一下网页在这方面是如何工作的吗？当我更改JSON文件时，如何使所有插件重新运行（或者至少使Handlebar重新编译为HTML）

webpack.config.js

const webpack = require('webpack');
const glob = require("glob");
const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HandlebarsPlugin = require("handlebars-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ImageminPlugin = require("imagemin-webpack-plugin").default;
const WatchFilesPlugin = require('webpack-watch-files-plugin').default;
const mergeJSON = require("./src/utils/mergeJSON");
const handlebarsHelpers = require("handlebars-helpers");

const lang = process.env.npm_config_lang; // lang variable passed as argument to script

const webpackConfig = {
  watch: true,
  watchOptions: {
    ignored: ['node_modules/**', 'dist']
  },
  entry: path.join(__dirname, 'src'),
  plugins: [
    new CleanWebpackPlugin(),

    new HandlebarsPlugin({
      // path to hbs entry file(s). Also supports nested directories if write path.join(process.cwd(), "app", "src", "**", "*.hbs"),
      entry: path.join(__dirname, "src", "emails", "**/*.hbs"),

      // output path and filename(s). This should lie within the webpacks output-folder
      // if ommited, the input filepath stripped of its extension will be used
      output: path.join(__dirname, "dist", "[path]", "[name].html"),
      // you can also add a [path] variable, which will emit the files with their relative path, like
      // output: path.join(process.cwd(), "build", [path], "[name].html"),

      // data passed to main hbs template: `main-template(data)`
      data: mergeJSON(path.join(__dirname, 'src/emails/**/*.json')),

      // globbed path to partials, where folder/filename is unique
      partials: [
        path.join(__dirname, "src", "partials", "*.hbs")
      ],

      // register custom helpers. May be either a function or a glob-pattern
      helpers: {
        projectHelpers: handlebarsHelpers()
      },

      // hooks
      // getTargetFilepath: function (filepath, outputTemplate) {},
      // getPartialId: function (filePath) {}
      onBeforeSetup: function (Handlebars) {},
      onBeforeAddPartials: function (Handlebars, partialsMap) {},
      onBeforeCompile: function (Handlebars, templateContent) {},
      onBeforeRender: function (Handlebars, data, filePath) {
        const mergedData = mergeJSON(path.join(__dirname, 'src/emails/**/*.json'));

        const filePathArray = filePath.split('/');
        const fileName = filePathArray[filePathArray.length-1].split('.hbs')[0];

        if(mergedData[fileName]) {
          // only json specific to this file and language will be used as data for this file
          return {...mergedData[fileName].config, ...mergedData[fileName][lang]};
        } else if(!lang) {
          const errorText = `The language code is required to build the emails. Pass it as an argument with this format "--lang=en-US".`;
          console.log('\n', '\x1b[41m\x1b[37m', errorText, '\x1b[0m');
          throw new Error(errorText);
        }
      },
      onBeforeSave: function (Handlebars, resultHtml, filename) {},
      onDone: function (Handlebars, filename) {}
    }),

    new CopyWebpackPlugin([{
      from: path.join(__dirname, "src/emails/**/imgs/*"),
      to: "[1]/[2].[ext]", // [1] and [2] are groups matched by the regex below
      test: /emails\/([^/]+)\/(.+)\.(jpe?g|png|gif|svg|)$/,
    }]),

    new ImageminPlugin({test: /\.(jpe?g|png|gif|svg)$/i}),

    new WatchFilesPlugin({
      files: [
        path.join(__dirname, "src", "emails", "**/data/*.json")
      ],
      verbose: true
    })
  ]
};

module.exports = webpackConfig;

---

这里也有类似的问题。出于兴趣如何使用.hbs文件中的helpers projectHelpers:handlebarsHelpers（）？