Webpack 不排除带有 HTMLWebPackPlugin 的 html 文件中的散列 javascript 文件答案

【问题标题】：Webpack not excluding hashed javascript files in html files with HTMLWebPackPluginWebpack 不排除带有 HTMLWebPackPlugin 的 html 文件中的散列 javascript 文件
【发布时间】：2019-07-26 22:57:52
【问题描述】：

我继承了一个 Webpack 配置，但它的状态很差。我正在尝试实现一个理智的缓存策略，该策略需要在输出的 javascript 文件的末尾添加哈希。

现在，当浏览器查看 HTML 文件时，注入的 <script> 标签缺少哈希或时间戳（例如：<script src="main.js">。因此，每当 javascript 更新时，浏览器都会假定它拥有最新版本的 javascript文件。为了解决这个问题，我可以在 HTMLWebpackPlugin 块中将 hash 属性设置为 true（但这会产生另一个问题）。配置还使用 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>

问题：现在 excludeAssets 数组中的 javascript 文件被注入到最后一个 body 标记上方的 HTML 中。

问题：如何在 html 中的 javascript 文件末尾注入哈希值，同时排除 excludeAssets 中的 javascript 文件？

这是整个配置的要点（记住我继承了它）：https://gist.github.com/joelhoelting/125132e1ce0a90e370564e7214a9e0f6

【问题讨论】：

标签： javascript caching webpack

【解决方案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
  }
}),

【讨论】：