我对 webpack 和 html-webpack-plugin 相当熟悉，并在其他几个 (SPA) 项目中使用过它们。但在这个新项目中，我必须将旧的多页面网站转换为使用 webpack。有一个自定义的 asp.net 处理程序 (ashx)，当前通过在脚本标记中的 .ashx 引用的查询字符串上放置逗号分隔的脚本名称列表来捆绑(并在产品版本中缩小)注册脚本:<script src="Script.ashx?i=jquery,jquery-ui,..."> 。
问题之一是几乎所有页面都使用母版页。所以，没有<body>用于 html-webpack-plugin 的标签。
如果我处理少量条目，那么使用一些 html-webpack-plugin 模板注入(inject)脚本并将输出文件放置在项目文件夹结构中的正确位置是没有问题的。但项目文件夹结构中的不同位置有 50 个 aspx 页面。因此，我非常希望避免为所有这些页面维护单独的模板。
但是鉴于没有 <body>任何这些文件中的标签，如何将脚本注入(inject)到所需的位置？
我构建了一个自定义代码生成器来读取项目中的所有 aspx 页面并查找 Script.ashx 引用。然后，它解析逗号分隔的查询字符串，并生成一个配套的 .js 文件，其中包含每个引用脚本的一个导入语句。这些伴随的 .js 文件将是 webpack“entry”数组中引用的文件。因此，例如/home.aspx 获得一个配套的/home-entry.js 文件。该文件位于 webpack 配置中:entry { "home" : "./home-entry", ... } 。并且在源aspx页面中注释掉了对应的Script.ashx。我还在生成 webpack entry 的代码数组和每个 entry 的 html-webpack-plugin 引用进入plugins webpack 配置中的数组。
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
} ),
home-entry.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 注入(inject)特定标签。 IE。我想要它做的是找到具体的 <asp:Content ID="Content6" ContentPlaceHolderID="footerPlaceHolder" runat="server">标记并将脚本标记注入(inject)其中。注意还有其他<asp:Content>具有不同 ContentPlaceHolderID 的标签值(value)观。所以 html-webpack-plugin 必须找到 ContentPlaceHolderID="footerPlaceHolder" 的那个。
实际结果:我相信使用默认的 html-webpack-plugin 选项，在没有 <body> 的情况下标签，插件会将脚本放在文件末尾。这会让 ASP.NET 感到困惑。
最佳答案
听起来我正在处理的代码库与您的设置类似。我搜索了很长一段时间的解决方案都没有结果。我最终编写了自己的 webpack 插件，现在可以为我处理这种情况。它默认写入 index.aspx 页面，但您可以指定您希望写入的任何类型的页面和/或位置。 你可以在这里查看。如果您愿意，请随意安装和使用。它不是 super 抛光或任何东西，但它对我们的设置运行良好。 https://github.com/pckessel/MPAInjectionWebpackPlugin
关于asp.net - 使用 html-webpack-plugin 将捆绑脚本标签注入(inject)带有母版页的 <asp :Content> tag in legacy . aspx 文件中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54117089/