HtmlWebpackPlugin的templateParameters热重载：修改data.json无响应如何解决？

问题根源在于你直接在webpack配置中用require('./src/data.json')导入数据，webpack会在构建初期就把JSON内容固化到配置里，后续修改JSON文件时，配置不会重新加载，templateParameters里的数据还是旧的；同时，即使devServer监听到文件变化，也无法触发HTML的重新生成。

需要做两个关键修改：

1. 动态读取JSON数据，避免缓存 #

把HtmlWebpackPlugin的templateParameters从静态对象改为函数，每次生成HTML时直接读取JSON文件内容，绕过webpack的模块缓存：

首先在配置文件顶部引入fs和path模块：

const fs = require('fs');
const path = require('path');

然后修改HtmlWebpackPlugin的配置：

new HtmlWebpackPlugin({
    template: "src/index.hbs",
    filename: "index.html",
    templateParameters: () => {
        // 拼接JSON文件的绝对路径
        const dataFilePath = path.resolve(__dirname, './src/data.json');
        // 读取文件内容并解析为JSON
        const freshData = JSON.parse(fs.readFileSync(dataFilePath, 'utf8'));
        return { data: freshData };
    },
}),

2. 确保devServer监听文件并触发编译 #

你的devServer.watchFiles已经配置了./src/data.json，这部分不需要修改。当JSON文件变化时，devServer会触发webpack重新编译，此时templateParameters函数会重新读取最新的JSON数据，生成新的HTML文件，devServer随后会自动刷新页面。

额外检查项 #

如果修改后仍未触发刷新，可以排查：

• 确认data.json的路径是否正确，使用path.resolve可避免相对路径歧义
• 确保webpack-dev-server版本为v4及以上（watchFiles是v4新增配置）
• 关闭IDE或webpack的文件缓存机制

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