Webpack: добавленная вручную зависимость файла компиляции должна вызвать перестройку

Question

Я использую Webpack 2 (через Laravel Mix) для компиляции ресурсов Javascript на разных языках, во многом как собственный плагин i18n Webpack. Однако я создал собственную реализацию, которая прекрасно сочетается с помощниками Микс. Однако есть одна последняя проблема, которую я не могу обернуть, которая связана с процессом наблюдения. Вот краткое изложение того, что происходит:

• Файл app.js имеет несколько зависимостей, которые составляют реальную логику
• Микс проинструктирован создать разные файлы для каждого языка, где у каждого из них могут быть заменены строки-заполнители на реальные переводы (это в конечном итоге приведет к выводу en.[hash].js, pt.[hash].js, так далее)
• Webpack обработает все эти зависимости и создаст связанный файл со всем кодом
• Когда Webpack собирается выпустить окончательные файлы, я обрабатываю заполнители перевода с помощью реальных языковых строк, используя файл JSON (en.json, pt.json, так далее; между прочим, файлы JSON на собственном языке Laravel)

Файлы JSON не включены в фактические app.js файл, поэтому Webpack игнорирует их при выполнении watch, Мне удалось запустить компиляцию, когда я изменяю эти файлы JSON, хотя, вставляя их как зависимости, в мой плагин apply метод:

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

Проблема в том, что Webpack перекомпилирует мой app.js когда я изменяю язык файлов JSON, поскольку они не являются частью скрипта, Webpack не распознает никаких изменений и не перестроит скрипт, поэтому любые реальные изменения в переводе не вступают в силу во время просмотра.

1) Могу ли я указать webpack принудительно пересобрать при изменении файлов JSON?

Дополнительное ограничение, о котором я могу подумать, заключается в следующем: поскольку хэши окончательного файла генерируются до перевода, даже если я инициирую перестроение, хэши будут точно такими же, поэтому при развертывании в рабочей среде браузер не будет знать, что переводы были обновлены. и все равно будет обслуживать кэшированную версию скрипта. Что приводит меня к:

2) Есть ли способ попросить Webpack восстановить хеш? Или, в качестве альтернативы, обработать содержимое скомпилированного файла перед созданием хеша?

Answer 1

У меня была аналогичная проблема с использованиемejsчастичные сwebpack v5.73.0иejs-webpack-loader. Изменения в частичных файлах (файлы .ejs) не вызывали ни перестроения, ни перезагрузки в реальном времени. После внедрения пользовательского плагина для добавления их в качестве зависимостей изменения были отражены после отключения кеша в моей конфигурации разработчика веб-пакета.

      // 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.

У меня нет правильного объяснения, почему в данный момент, я надеюсь, что это поможет кому-то, кто хочет заставить живую перезагрузку работать с вручную настроенными зависимостями в веб-пакете.