asp.net - 使用 html-webpack-plugin 将 bundle script 标签注入<asp:content>带有母版页的旧 .aspx 文件中的标记？</asp:content>

问题描述

我对 webpack 和 html-webpack-plugin 相当熟悉，并在其他几个 (SPA) 项目中使用过它们。但是在这个新项目中，我必须将旧的多页网站转换为使用 webpack。有一个自定义的 asp.net 处理程序 (ashx)，它当前通过在脚本标记中的 .ashx 引用的查询字符串上放置一个逗号分隔的脚本名称列表来捆绑（并在 prod 构建中缩小）已注册的脚本：<script src="Script.ashx?i=jquery,jquery-ui,...">.

问题之一是几乎所有页面都使用母版页。因此，没有<body>标签可用于 html-webpack-plugin。

如果我正在处理少量条目，则使用一些 html-webpack-plugin 模板来注入脚本并将输出文件放置在项目文件夹结构中的正确位置是没有问题的。但是在项目文件夹结构的不同位置有 50 个 aspx 页面。所以我非常想避免为所有这些页面维护单独的模板。

但是鉴于<body>这些文件中没有任何标签，我如何将脚本注入所需的位置？

我已经构建了一个自定义代码生成器来读取项目中的所有 aspx 页面并找到 Script.ashx 引用。然后，它解析逗号分隔的查询字符串并生成一个伴随的 .js 文件，其中每个引用的脚本都有一个导入语句。这些伴随的 .js 文件将在 webpack “entry” 数组中被引用。因此，例如 /home.aspx 获得一个伴随的 /home-entry.js 文件。该文件位于 webpack 配置中：entry { "home" : "./home-entry", ... }. 并且对应的Script.ashx在源aspx页面中被注释掉了。我还将代码生成 webpackentry数组和 html-webpack-plugin 引用，每个引用entry到pluginswebpack 配置中的数组中。

Home.aspx（片段）：

<asp:Content ID="Content6" ContentPlaceHolderID="footerPlaceHolder" runat="server">
    <script type="text/javascript" src="/Script.ashx?i=jquery,jquery-migrate,jquery-ui,jquery-watermark,popr,acrobat-detection,pdflinkfix,device,navbar,jqdialoghelper,home&v=<%= "" + MyNameSpace.Scripts.ScriptHelpers.AssemblyVersion %>"></script>
</asp:Content>

输入示例：

"home" : "./home-entry",

插件示例：

new HtmlWebpackPlugin( {
    chunks: ['home-entry'],
    alwaysWriteToDisk: true,
    filename: "./home.aspx",
    inject: 'body', // or what?
    chunkSortMode: "dependency",
    hash: true
} ),

主页入口.js：

import '/Scripts/jquery-3.3.1.min'
import '/Scripts/jquery-migrate-min'
import '/Scripts/jquery-ui-1.12.1.min'
import '/Scripts/jquery.watermark.min'
import '/Scripts/popr/popr'
import '/Scripts/acrobat_detection'
import '/Scripts/PDFLinkFix'
import '/Scripts/Device'
import '/Scripts/NavBar'
import '/Scripts/jqDialogHelper'
import '/Scripts/Home'

预期结果：最大的问题是我不知道是否有办法告诉 html-webpack-plugin 注入特定标签。即我想要它做的是找到特定的<asp:Content ID="Content6" ContentPlaceHolderID="footerPlaceHolder" runat="server">标签并将脚本标签注入其中。请注意，还有其他<asp:Content>标签具有不同的ContentPlaceHolderID值。所以 html-webpack-plugin 必须找到带有ContentPlaceHolderID="footerPlaceHolder".

实际结果：我相信使用默认的 html-webpack-plugin 选项，在没有<body>标签的情况下，插件会将脚本放在文件末尾。这会混淆asp.net。

标签： asp.netwebpackwebformswebpack-4html-webpack-plugin

asp.net - 使用 html-webpack-plugin 将 bundle script 标签注入带有母版页的旧 .aspx 文件中的标记？

问题描述

解决方案

推荐阅读