Webpack-dev-server监视特定文件夹，文件更改触发插件

Question

我有一个包含html个文件的文件夹，该文件由myHtmlPlugin进行编译。我希望webpack-dev-server监视此文件夹中的更改并运行myHtmlPlugin。基本上，我想添加没有自定义插件入口点的观察程序。这可能吗？

Answer 1

1. 所有html文件都被编译为单个js

fs.readdir(directoryPath, (err, files) => {
  fs.writeFileSync(
    path.resolve(__dirname, 'public/htmltemplates.min.js'),
    this.filecontent,
    (err) => {
      if(err) throw new Error(err);
    }
  )
});

1. 此输出被设置为入口点：

module.exports = {
  entry: {
    htmlTemplates: 'htmltemplates.min.js',
  },

1. 内部插件类中，在Webpack中，默认的apply方法已设置为观察者：

class myHtmlPlugin {
  apply(compiler) {
    fs.watch(
      path.resolve(__dirname, 'templates/views/'),
      'utf8', 
      (eventType, filename) => {
          this.compileHtml();
    });
  }
}

在目录内更改文件时，nodejs将所有html个文件编译为一个文件，即webpack服务器的entryPoint。