ПРИМЕЧАНИЕ. Это руководство устарело, скоро появится 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