Длительное кэширование

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

Webpack может добавлять хэши файлов в имя файла. Загрузчики, которые выводят файлы (worker-loader, file-loader), уже делают это. Для фрагментов необходимо включить эту функцию. Существуют два уровня:

1. Вычислить хэш всех фрагментов и добавить его.
2. Вычислить хэш для каждого фрагмента и добавить его.

Вариант 1: Один хэш для пакета

Вариант 1 включён путём добавления [hash] к опциям конфигурации имени файла:

webpack ./entry output.[hash].bundle.js

{
    output: {
        path: path.join(__dirname, "assets", "[hash]"),
        publicPath: "assets/[hash]/",
        filename: "output.[hash].bundle.js",
        chunkFilename: "[id].[hash].bundle.js"
    }
}

Вариант 2: Один хэш на фрагмент

Вариант 2 включён путём добавления [chunkhash] к опции конфигурации имени файла фрагмента

--output-chunk-file [chunkhash].js

output: { chunkFilename: "[chunkhash].bundle.js" }

Обратите внимание, что вам необходимо сослаться на фрагмент входа с его хэшем в вашем HTML. Вы можете извлечь хэш или имя файла из данных статистики.

В сочетании с горячей заменой кода необходимо использовать вариант 1, но не опцию publicPath конфигурации.

Получение имён файлов из статистики

Вероятно, вы захотите получить конечное имя файла ресурса, чтобы вставить его в HTML. Эта информация доступна в статистике webpack. Если вы используете командную строку, вы можете запустить её с --json для получения статистики в формате JSON в стандартный вывод.

Вы можете добавить плагин, такой как assets-webpack-plugin, в свою конфигурацию, чтобы получить доступ к объекту статистики. Вот пример, как записать его в файл:

plugins: [
  function() {
    this.plugin("done", function(stats) {
      require("fs").writeFileSync(
        path.join(__dirname, "..", "stats.json"),
        JSON.stringify(stats.toJson()));
    });
  }
]

JSON-статистики содержит полезное свойство assetsByChunkName, которое является объектом, содержащим имя фрагмента в качестве ключа и имя(а) файла(ов) в качестве значения.

Примечание: Это массив, если вы выводите несколько ресурсов на фрагмент. Например, файл JavaScript и SourceMap. Первый — это ваш исходный код JavaScript.