Webpack не исключает хешированные файлы javascript в html-файлах с помощью HTMLWebPackPlugin
Я унаследовал конфигурацию Webpack, и она в плохом состоянии. Я пытаюсь реализовать разумную стратегию кэширования, которая требует добавления хэшей в конец выводимых файлов javascript.
Прямо сейчас, когда браузер просматривает HTML-файлы, в введенных тегах <script> отсутствуют хэши или временные метки (например, <script src = "main.js">). Поэтому всякий раз, когда javascript обновляется, браузер предполагает, что у него самые последние версии файлов javascript. Чтобы решить эту проблему проблема Я могу установить для свойства hash значение true в блоке HTMLWebpackPlugin (однако это создает другую проблему). Конфигурация также использует HtmlWebpackExcludeAssetsPlugin, чтобы исключить внедрение определенных ресурсов в HTML. Не спрашивайте меня, почему, но я работаю с что у меня есть. Вот пример:
new HtmlWebpackPlugin({
filename: "index.html",
template: path.join(process.cwd(), "src", "templates", "home.ejs"),
inject: true,
hash: false,
excludeAssets: [
/(availabilityView|availability|press|legal|accessibility|visit|addons).(js|css)$/
],
minify: {
removeComments: true,
collapseWhitespace: false
}
}),Установка hash: false приводит к следующему:
<script type = "text/javascript" src = "scripts/manifest.js"></script>
<script type = "text/javascript" src = "scripts/vendor.js"></script>
<script type = "text/javascript" src = "scripts/main.js"></script>Параметр hash: true внутри блока работает должным образом и добавляет хэш-значения внутри HTML-файла. Как это:
<script type = "text/javascript" src = "scripts/manifest.js?bf93a9f5cbf821b8c89b"></script>
<script type = "text/javascript" src = "scripts/vendor.js?bf93a9f5cbf821b8c89b"></script>
<script type = "text/javascript" src = "scripts/main.js?bf93a9f5cbf821b8c89b"></script>
<script type = "text/javascript" src = "scripts/availability.js?bf93a9f5cbf821b8c89b"></script>
<script type = "text/javascript" src = "scripts/visit.js?bf93a9f5cbf821b8c89b"></script>
<script type = "text/javascript" src = "scripts/press.js?bf93a9f5cbf821b8c89b"></script>
<script type = "text/javascript" src = "scripts/legal.js?bf93a9f5cbf821b8c89b"></script>
<script type = "text/javascript" src = "scripts/accessibility.js?bf93a9f5cbf821b8c89b"></script>Проблема: теперь файлы javascript в массиве excludeAssets внедряются в HTML над последним тегом body.
Вопрос: Как я могу вводить хэши в конец файлов javascript в html, одновременно исключая файлы javascript в excludeAssets?
Вот суть всей конфигурации (помните, что я унаследовал ее): https://gist.github.com/joelhoelting/125132e1ce0a90e370564e7214a9e0f6
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема заключалась в том, что регулярное выражение, которое передается в excludeAssets, не могло выбрать хешированные имена файлов. Следующее регулярное выражение работало по назначению:
new HtmlWebpackPlugin({
filename: "index.html",
template: path.join(process.cwd(), "src", "templates", "home.ejs"),
inject: true,
hash: false,
excludeAssets: [
/(availabilityView.*|availability.*|press.*|legal.*|accessibility.*|visit.*)/
],
minify: {
removeComments: true,
collapseWhitespace: false
}
}),