Webpack 和 HtmlWebpackPlugin：将块注入自定义模板不起作用答案

【问题标题】：Webpack & HtmlWebpackPlugin: Injection of chunks into custom template doesn't workWebpack 和 HtmlWebpackPlugin：将块注入自定义模板不起作用
【发布时间】：2020-08-01 03:11:36
【问题描述】：

我正在使用带有多个入口点和块的 Webpack/HtmlWebpackPlugin 来编译 AngularJS 应用程序。我需要在 HTML 模板中间的某个地方注入 JS，所以我使用

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

如此处所述：https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs。模板已编译，但没有为我的块插入脚本标签。怎么了？

我的相关 Webpack 配置 [webpack.prod.config.js]：

const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const common = require('./webpack.base.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  output: {
    filename: '[name].bundle.min.js',
    path: path.resolve(__dirname, 'dist.prod')
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src-ts-store/landingpage_store.liquid.ejs',
        filename: 'landingpage_store.liquid',
        base: {href: '/apps/sgp'},
        inject: false,/* instead using this:  https://github.com/jantimon/html-webpack-plugin/issues/386 , https://github.com/jaketrent/html-webpack-template */
        chunks: ['app-store','defaultVendors','dptCommon']
      }),
      new HtmlWebpackPlugin({
        template: './src-ts-admin/landingpage_admin.html.ejs',
        filename: 'landingpage_admin.html',
        base: {href: '/frontend-admin/'},
        inject: false,/* instead using this:  https://github.com/jantimon/html-webpack-plugin/issues/386 , https://github.com/jaketrent/html-webpack-template */
        chunks: ['app-admin','defaultVendors','dptCommon']
      })
    ]
});

模板的相关部分 [landingpage_admin.html.ejs]

<html ng-app="DPT" ng-controller="appController">
 <script src="app.environment.var.js"></script>
 <link href="plugins/bootstrap-dropdown-removed-typography.css" rel="stylesheet" type="text/css" />


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


 <script src="https://kit.fontawesome.com/b6b551a0d0.js" crossorigin="anonymous"></script>
 [...]

相关的控制台输出

Child HtmlWebpackCompiler:
     2 assets
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src-ts-store/landingpage_store.liquid.ejs 2.26 KiB {0} [built]
    [1] ./node_modules/html-webpack-plugin/lib/loader.js!./src-ts-admin/landingpage_admin.html.ejs 12 KiB {1} [built]

【问题讨论】：

标签： javascript webpack html-webpack-plugin

【解决方案1】：

我找到了https://github.com/jaketrent/html-webpack-template/issues/69#issuecomment-376872044，但并没有真正理解到底出了什么问题，我已经改变了

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

到以下内容，它为我解决了这个问题：

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

【讨论】：

我的英雄！为什么<%= htmlWebpackPlugin.tags.headTags %> 不起作用