如何实现修改指定文件时重新加载Webpack HTML模板？

方案1：用raw-loader导入幻灯片并动态注入 #

• 安装依赖：npm install raw-loader --save-dev
• 在Webpack配置中添加规则，处理slides目录下的HTML文件：

  module.exports = {
    module: {
      rules: [
        {
          test: /slides\/.*\.html$/,
          use: 'raw-loader'
        }
      ]
    }
  };
  

• 修改主模板文件（比如index.ejs），通过导入或遍历读取幻灯片内容并插入：

  <div class="reveal">
    <div class="slides">
      <!-- 静态导入单张幻灯片 -->
      <%= require('./slides/1.html').default %>
      <%= require('./slides/2.html').default %>
  
      <!-- 或动态遍历所有幻灯片文件 -->
      <%
        const fs = require('fs');
        const path = require('path');
        const slidesDir = path.resolve(__dirname, 'slides');
        // 按数字排序幻灯片文件
        const slideFiles = fs.readdirSync(slidesDir)
          .filter(file => file.match(/^\d+\.html$/))
          .sort((a, b) => parseInt(a.split('.')[0]) - parseInt(b.split('.')[0]));
        
        slideFiles.forEach(file => {
          const content = fs.readFileSync(path.join(slidesDir, file), 'utf8');
          %><%= content %><%
        });
      %>
    </div>
  </div>
  

• 此方案会将幻灯片文件纳入Webpack的依赖树，修改时自动触发重新编译，HtmlWebpackPlugin会同步更新输出的HTML。

方案2：自定义插件监听幻灯片目录变化 #

• 编写一个简单的Webpack插件，监听slides目录的文件修改，手动清除HtmlWebpackPlugin的缓存以触发更新：

  const fs = require('fs');
  const path = require('path');
  
  class SlideChangeWatcher {
    apply(compiler) {
      const slidesDir = path.resolve(__dirname, 'slides');
  
      compiler.hooks.watchRun.tap('SlideChangeWatcher', (compiler) => {
        const changedFiles = compiler.watchFileSystem.watcher.mtimes;
        // 检查是否有幻灯片文件被修改
        const hasSlideUpdate = Object.keys(changedFiles).some(file => file.includes(slidesDir));
        
        if (hasSlideUpdate) {
          // 清除HtmlWebpackPlugin的缓存，强制重新生成模板
          compiler.hooks.compilation.tap('SlideChangeWatcher', (compilation) => {
            compilation.cache.delete('HtmlWebpackPlugin');
          });
        }
      });
    }
  }
  

• 在Webpack配置中注册该插件：

  module.exports = {
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.ejs'
      }),
      new SlideChangeWatcher()
    ]
  };
  

方案3：优化模板动态读取逻辑+配置Webpack监听 #

• 调整Webpack的watchOptions，确保能监听到slides目录的文件变化：

  module.exports = {
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 300, // 延迟编译，避免频繁触发
      poll: 1000 // 轮询文件变化，适配部分文件系统
    }
  };
  

• 在主EJS模板中直接动态读取幻灯片内容（无需依赖getTemplate）：

  <div class="reveal">
    <div class="slides">
      <%
        const fs = require('fs');
        const path = require('path');
        const slidesDir = path.resolve(__dirname, 'slides');
        const slideFiles = fs.readdirSync(slidesDir)
          .filter(f => f.endsWith('.html'))
          .sort((a,b) => parseInt(a.split('.')[0]) - parseInt(b.split('.')[0]));
        
        slideFiles.forEach(file => {
          const slideContent = fs.readFileSync(path.join(slidesDir, file), 'utf8');
          %><%= slideContent %><%
        });
      %>
    </div>
  </div>
  

• 当幻灯片文件修改时，Webpack会触发模板重新编译，因为模板直接读取了这些文件的内容。

内容的提问来源于stack exchange，提问作者Omar Khaled