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

Posted 2021-04-14

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

答案

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);
    }
  )
});

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

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

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

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

在目录内文件更改时，nodejs将所有html文件编译为单个文件，这是webpack服务器的入口点。