HtmlWebpackPlugin 将所有脚本标签放在一行中？答案

【问题标题】：HtmlWebpackPlugin putting all script tags in one line?HtmlWebpackPlugin 将所有脚本标签放在一行中？
【发布时间】：2022-12-21 16:48:21
【问题描述】：

为什么这段代码将所有脚本标签放在一行中？看起来很丑，请帮助我

一开始它把所有东西都放在一行，但现在它只把脚本标签放在一行

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        lol: './src/lol.js',
        kush: "./src/kush.js"
      },
      plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management',
            inject:   "body",
            minify: { collapseWhitespace: false },
        }),
      ],
    output: {  
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    },
  },
};

【问题讨论】：

标签： webpack html-webpack-plugin

【解决方案1】：

我有同样的问题，我的解决方案是不用户注入，但使用htmlWebpackPlugin.tags手动处理

<!DOCTYPE html>
<html>
<head>
<% htmlWebpackPlugin.tags.headTags.forEach((tag) => { %><%= '    ' + tag + '
' %><% }) %>
</head>
<body
    <div>
        <!-- some html content -->
    </div>
<% htmlWebpackPlugin.tags.bodyTags.forEach((tag) => { %><%= '    ' + tag + '
' %><% }) %>
</body>
</html>

它将创建如下结果：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <link href="assets/css/93b7166d870a29a6fad6.bundle.css" rel="stylesheet" integrity="sha384-Oo8gaHXRDnVLTy8gdmWUpQdtthZTVqhZKX+kdXoWAy17bo/rKv82S8Cx5jb++Sit" crossorigin="anonymous">

</head>
<body>
    <div>
        <!-- some html content -->
    </div>
    <script src="assets/js/2a9ca03ee33386c2edb7.bundle.js" integrity="sha384-Xstlc3gJWqqvivogC+OkawDdDb9q5pFH5RuHS4cWVNbPVbSoDgap9ozyIy8DCSQE" crossorigin="anonymous"></script>

</body>
</html>

请注意，js 代码所在的位置有两个空行。

【讨论】：