webpack - 如何使用插件 html-webpack-plugin

问题描述

我有一个由 webpack 处理的 webapp 并生成一个捆绑文件，文件名中带有哈希值，例如./app.bundle.69864e89b3c785f87cc0.js。
我想根据模板 .ejs 文件将此文件名填充到生成的 .html 文件中。
我正在使用 webpack 插件 html-webpack-plugin。
我阅读了 html-webpack-plugin 文档和几个 html-webpack-plugin 相关教程但我还是不清楚，怎么做？

webpack cache-busting tutorial 在正文部分的末尾填充散列文件名。
但就我而言，我需要将散列文件名 app.bundle.69864e89b3c785f87cc0.js 注入正文部分中间的特定位置。
我阅读了插件 official documentation 我不清楚应该如何运行脚本 build-examples.js 来构建所有示例，或者如何构建特定示例。
尝试构建特定示例时，出现错误：

mkdir -p ~/webpackRelated/
git clone https://github.com/jantimon/html-webpack-plugin.git
pushd ~/webpackRelated/html-webpack-plugin/examples/template-parameters/
webpack

webpack-cli] Error: Cannot find module 'lodash'

我基本上想实现here中的要求。我根据注释 here 设置 inject:false 不生成模板。该评论还指向一个 example template

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

但没有显示如何设置配置文件。

以下是我的源文件：

webpack.config.take1.js - webpack 配置文件
index.template.ejs - 模板文件
index.html - 最终文件，我希望在其中填充散列名称 app.bundle.69864e89b3c785f87cc0.js，但事实并非如此。

我使用以下命令运行 webpack：

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

这会创建一个散列版本 ./app.bundle.69864e89b3c785f87cc0.js，但我找不到如何将散列名称注入 index.template.ejs 文件中的特定位置。

如何将生成的散列捆绑文件名填充到现有模板中？ 有人可以提供模板和 webpack 配置文件的示例吗？

谢谢，

阿夫纳

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 chunk in htmlWebpackPlugin.chunks) { %>
       <script src="<%= htmlWebpackPlugin.chunks[chunk] %>"></script>
       <% } %>
       <p><%= content2 %></p>
    </body>
</html>

填充的文件 index.html

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

I expected to see here,the follwoing line,but nothing shows up between foo1,and foo2
<script src="app.bundle.69864e89b3c785f87cc0.js"></script>

<p>foo2</p>

解决方法

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

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

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

html-webpack-plugin webpack webpack webpack