html webpack插件和注入后的新行答案

【问题标题】：html webpack plugin and new lines after injectionhtml webpack插件和注入后的新行
【发布时间】：2020-02-22 01:05:30
【问题描述】：

我将webpack 4.41.2 版与html-webpack-plugin 3.2.0 版结合使用

$ npm info webpack version
4.41.2

$ npm info html-webpack-plugin version
3.2.0

我创建了一个名为 index.ejs 的 html 模板（这样命名为 to eliminate any conflicts with html-loader。我没有使用 html-loader 插件）。

这里是对应的webpack配置：

new HTMLWebpackPlugin({
  template: "src/index.ejs",
  filename: "index.html",
  inject:   "body"
})

检查渲染输出后，我看到所有<script> 标记都连接在一起，没有任何新行

<script type="text/javascript" src="vendors~main.js"></script><script type="text/javascript" src="main.js"></script></body>

知道我做错了什么或者我该如何解决它以使每个封闭的</script>标签后跟一个新行（为了便于阅读）？

【问题讨论】：

标签： javascript webpack ejs html-webpack-plugin

【解决方案1】：

根据 html-webpack-plugin here 的文档，您可以将选项传递给插件使用的html-minifier。

这允许您使用collapseWhitespace: false 选项跳过空白删除。因此，如果您的初始模板包含新行，它们将被保留。

这还不够，因为注入的脚本标签之间已经没有空格了。

所以，除了我们还需要：

使用inject: false 选项阻止插件注入脚本标签。
使用模板自己注入脚本标签，提供我们需要的新行。

然后配置将是：

new HTMLWebpackPlugin({
  template: "src/index.ejs",
  filename: "index.html",
  inject:   false,
  minify: { collapseWhitespace: false }
})

模板scr/index.ejs 类似于：

<html>
  <head></head>
  <body>
    <div>Some content</div><%
  for (const tag of htmlWebpackPlugin.tags.bodyTags) { %>
    <%= tag %><%
  } %>
  </body>
</html>

然后输出将类似于：

<html>
  <head></head>
  <body>
    <div>Some content</div>
    <script src="vendors~main.js"></script>
    <script src="main.js"></script>
  </body>
</html>

【讨论】：

添加 minify: { collapseWhitespace: false } 没有影响我的问题
@Mr.感谢您的反馈意见。对不起，我一开始似乎没有完全理解这个问题。请查看我更新的答案。谢谢！
感谢您的更新！还没有测试它，但不是支持模板中插件的每个内置功能，我想利用inject: body 功能......：|
@Mr.我明白你的意思。但是，目前似乎没有其他办法。此外，您已经在使用模板，因此唯一可用且我们正在覆盖的内置功能是标签的注入，它只是基于正则表达式来决定注入的位置。