ПРИМЕЧАНИЕ. Это руководство устарело, скоро появится Webpack 4.

Последние пару дней я занимался производственным развертыванием быстро развивающегося веб-приложения в Powerspace.
Я использую webpack для упаковки всех ресурсов, таких как JS, HTML или CSS, и пользователей столкнулись с проблемами, связанными с тем, что браузеры кешируют статические ресурсы. Следовательно, ресурсы не обновлялись после того, как каждая новая версия была размещена в сети. Мы решили решить эту проблему с помощью очистки кеша.

Чего мы хотели?

В основном мы хотели, чтобы ресурсы запрашивались следующим образом:

bundle-14903095.js
bundle-14903095.css

Для этого начнем с webpack:

Мы используем [hash: x] для создания хеша с x, количеством символов, которое вам нужно. (x необязательно)

Вы также можете добавить хеш для HTML и изображений:

Затем мы загружаем наши файлы .scss или / и .css с помощью extract-text-webpack-plugin:

теперь для создания внешних файлов:

Подсказки :

Я не рекомендую использовать [hash] в разработке, так как это увеличит время упаковки и, надеюсь, потому что у вас все хорошо и вы уже отключили кеш в своем любимом браузере. Вы можете использовать два отдельных файла конфигурации, например webpack.config.js и webpack.prod.config.js или используйте переменную для получения текущего состояния.

Пример конфигурации веб-пакета с использованием переменной:

Я использую npm как раннер со следующими задачами:

“scripts”: {
 “build”: “rm -rf www/* && NODE_ENV=production webpack -p”,
 “devserver”: “rm -rf www/* && webpack -w —-progress --colors”
 }

Команда «build» предназначена для производства, и именно здесь я установил для переменной NODE_ENV значение production. «devserver» предназначен для разработки.

Вот конфигурация веб-пакета для переключения между ними:

Как видите, я создаю .map, чтобы уменьшить вес моего пакета, используя devtool: «source-map»

Теперь, когда мы сгенерировали пакет, последнее, что нам нужно, - это включить его в index.html. Мы используем функциональность htmlWebpackPlugin следующим образом:

Вот и все ! Webpack добавил уникальный хэш ко всем скриптам, html и css файлам.

Бонус

Есть и другие способы сделать это. Например, HtmlWebpackPlugin имеет хэш атрибута (логический), который автоматически добавляет уникальный хэш компиляции веб-пакета ко всем включенным скриптам и файлам css. Это быстрее, чем добавление [hash: x], но включает только css и js. Возможно, вам понадобится хешировать и другие ресурсы.

Надеюсь, вам понравилась статья, не стесняйтесь говорить об этом здесь или в твиттере: https://twitter.com/ByJCf