Webpack：手动添加编译文件依赖项应强制重建

Question

I'm using Webpack 2 (via Laravel Mix) to compile a Javascript asset in different languages, much like Webpack's own i18n plugin. I've built a custom implementation, though, which plays nicely with Mix's helpers. There is one final issue, though, which I cannot wrap my head around, which has to do with the watch process. Here's a summary of what is happening:

• An app.js file has several dependencies which compose the actual logic
• Mix is instructed to create a different file for each language, where each one can have their placeholder strings replaced with actual translations (this will eventually output en.[hash].js, pt.[hash].js, etc)
• Webpack will process all those dependencies and create a bundled file with all the code
• When Webpack is about to emit the final files, I process the translation placeholders with actual language strings using a JSON file (en.json, pt.json, etc; incidentally, Laravel's own language JSON files)

The JSON files are not included in the actual app.js file, so Webpack ignores them when doing watch. I've managed to trigger compilation when I change those JSON files, though, by injecting them as dependencies, in my plugin's apply method:

compiler.plugin('emit', (compilation, callback) => {
    mix.config.locales.forEach(_.bind(function (locale) {
        const file = path.resolve(this.translationsPath, `${locale}.json`)
        if (!_.includes(compilation.fileDependencies, file)) {
            compilation.fileDependencies.push(file);
        }
    }, this))
    callback()
})

The problem is, even though Webpack re-compiles my app.js when I change the language JSON files, since they are not really part of the script Webpack will not recognise any changes and will not rebuild the script, so any actual changes in translation don't take effect during watch.

1) Can I tell webpack to force a rebuild when the JSON files change?

An additional limitation I can think of is this: since the final file's hashes are generated before translation, even if I trigger a rebuild the hashes will be exactly the same, so when deploying to production the browser's won't know the translations have been updated and will still serve a cached version of the script. Which leads me to:

2) Is there a way to ask Webpack to regenerate the hash? Or, alternatively, process a compiled file's content before the hash is generated?

Answer 1

我在使用和 的ejs部分时遇到了类似的问题。对部分文件（.ejs 文件）的更改不会导致重建，也不会实时重新加载。在实现自定义插件以将它们添加为依赖项后，在我的 webpack 开发配置中禁用缓存后反映了更改。webpack v5.73.0ejs-webpack-loader

// Webpack development config
module.exports = {
...
 cache: false
...
}

将模板文件夹添加为依赖项的代码

module.exports = class WatchPartials {
    apply(compiler) {
      compiler.hooks.afterCompile.tap("Custom watcher", (compilation) => {
        [path.join(<src directory>, '/templates')].forEach((path) =>
          compilation.contextDependencies.add(path)
        );
      });
    }
}

像 webpack 插件一样初始化它

const WatchPartials  = require('./configuration/watchPartials')

plugins: [ 
...
    new WatchPartials(),
...
]

总之，文件编辑时的实时重新加载和重新编译只有在设置后才能完美工作cache: false。

我目前还没有正确的解释为什么，我希望它可以帮助那些希望实时重新加载以处理 webpack 上手动配置的依赖项的人。