Question

我对webpack和html-webpack-plugin相当熟悉，并在其他两个（SPA）项目中使用了它们。但是在这个新项目中，我必须转换一个旧的多页面网站以使用webpack。目前有一个自定义的asp.net处理程序（ashx），通过在脚本标记中的.ashx引用的查询字符串上放置逗号分隔的脚本名称列表，来捆绑（并在产品版本中最小化）已注册的脚本：{{1} }。

问题之一是几乎所有页面都使用母版页。因此，没有<script src="Script.ashx?i=jquery,jquery-ui,...">标签可用于html-webpack-plugin。

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

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

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

Home.aspx（摘要）：

plugins

输入示例：

<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",

home-entry.js：

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

预期结果：最大的问题是我无法弄清楚是否有一种方法可以告诉html-webpack-plugin注入特定的标签。即我想要做的是找到特定的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'标签并将脚本标签注入其中。请注意，还有其他<asp:Content ID="Content6" ContentPlaceHolderID="footerPlaceHolder" runat="server">个标记具有不同的<asp:Content>值。因此html-webpack-plugin必须使用ContentPlaceHolderID找到一个。

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

Answer 1

听起来我正在处理的代码库具有与您类似的设置。我寻找解决方案已经有一段时间了，但无济于事。我最终编写了自己的webpack插件，现在可以为我处理这种情况。它默认为写入index.aspx页，但是您可以指定要写入的页面类型和/或位置。您可以在这里查看。如果需要，请随意安装和使用。它不是超级抛光或其他任何东西，但对于我们的设置来说效果很好。 https://github.com/pckessel/MPAInjectionWebpackPlugin

使用html-webpack-plugin将捆绑脚本标签插入具有主页面的旧版.aspx文件中的<asp：content>标签中吗？

1 个答案: