html-webpack-plugin 在生成 .html 文件时创建额外的行，基于给定的模板

问题描述

我有一个由 webpack 处理的 webapp 并生成一个捆绑文件，文件名中带有哈希值，例如./app.bundle.623dee76203934f419e9.js。
我想根据模板 .ejs 文件将此文件名填充到生成的 .html 文件中。
我正在使用 webpack 插件 html-webpack-plugin。

以下是我的源文件：

webpack.config.take1.js - webpack 配置文件
index.template.ejs - 模板文件
index.html - 最终文件，我希望其中有一行带有散列名称，例如app.bundle.623dee76203934f419e9.js。

我使用以下命令运行 webpack：

webpack --config webpack/webpack.config.take1.js

这会创建一个散列版本 ./app.bundle.623dee76203934f419e9.js，并将其填充到 index.html 文件中的所需位置。
但它也会产生一些副作用：

它创建了 4 个我不想要的额外行。
它将 css 捆绑文件名填充到正文中。我想过滤掉css文件名，放在head部分。

我想看到的是

<script src="build/./app.bundle.623dee76203934f419e9.js"></script>

我的问题：

为什么会创建额外的行？
webpack 如何创建文件列表（什么是文件）？
有没有办法过滤文件以便不创建额外的行，并从正文中丢弃 css 文件名？

谢谢，

阿夫纳

EDIT1：

我将以下代码段添加到 index.template.ejs

   <% Object.keys(htmlWebpackPlugin.files).forEach(function(key){ %>
   <script src="<%= key %>"></script>
   <% }); %>

输出是

   <script src="publicPath"></script>
   
   <script src="js"></script>
   
   <script src="css"></script>
   
   <script src="manifest"></script>
   
   <script src="favicon"></script>

所以文件名是： publicPath,js,css,manifest,favicon

这些文件名没有在我的配置文件中指定，那么它们来自哪里？

没有填充，如果我尝试使用 chunks 而不是 files，即

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk] %>"></script>
<% } %>

我应该如何使用块以便正确填充输出 .html？

webpack 配置文件 - webpack.config.take1.js

cat webpack.config.take1.js
const webpack = require('../webClient/node_modules/webpack')
var path = require('path');
const HtmlWebpackPlugin = require('../webClient/node_modules/html-webpack-plugin')

module.exports = {
    mode: 'development',context: path.resolve('js/'),entry: {
        app: './main.js',css: "../../css/style.css",},devServer: {
        contentBase: 'public'
    },module: {
        rules: [
            {
                test: /\.js$/,loader: 'babel-loader',options: {
                    presets: ["@babel/preset-env"]
                }                
            },{
                test: /\.css$/,use: [{ loader: 'style-loader' },{ loader: 'css-loader' }],}
        ]    
    },plugins: [
        new HtmlWebpackPlugin({
            filename: './index.html',template: './index.template.ejs',templateParameters: {
                content1: 'foo1',content2: 'foo2',inject: false,chunks: ['output.chunkFilename'],})
    ],output: {
        path: path.resolve('build/bundles_prod'),filename: "./[name].bundle.[chunkhash].js",chunkFilename: "[name].[chunkhash].js",publicPath: 'build',// library: "lib1",// libraryTarget: "umd",}
};

模板文件 - index.template.ejs

cat index.template.ejs
<!DOCTYPE html>
<html lang="en">
    <head>
...
        <link rel="stylesheet" type="text/css" href="/V1/css/style.css">
...
    </head>
    <body>
...
       {% if flask_env == "development" %}
...
       <p><%= content1 %></p>

       <% for (var file in htmlWebpackPlugin.files) { %>
       <script src="<%= htmlWebpackPlugin.files[file] %>"></script>
       <% } %>

       <p><%= content2 %></p>
    </body>
</html>

填充的文件 index.html

cat index.html
<p>foo1</p>

<script src="build/"></script>

<script src="build/./app.bundle.623dee76203934f419e9.js,build/./css.bundle.3ffedc8c0cb555722c1f.js"></script>

<script src=""></script>

<script src=""></script>

<script src=""></script>

<p>foo2</p>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html-webpack-plugin webpack webpack webpack