Используйте html-webpack-plugin, чтобы вставить теги сценария пакета в тег <asp: Content> в старых файлах .aspx с главной страницей? - PullRequest
Новая
       14

Используйте html-webpack-plugin, чтобы вставить теги сценария пакета в тег <asp: Content> в старых файлах .aspx с главной страницей?

0 голосов
/ 09 января 2019

Я довольно хорошо знаком с webpack и html-webpack-plugin и уже использовал их в нескольких других (SPA) проектах. Но в этом новом проекте я должен преобразовать устаревший многостраничный веб-сайт, чтобы использовать веб-пакет. Существует специальный обработчик asp.net (ashx), который в настоящее время объединяет (и минимизирует в сборках prod) зарегистрированные сценарии, помещая отдельный запятый список имен сценариев в строку запроса ссылки .ashx в теге script: <script src="Script.ashx?i=jquery,jquery-ui,...">.

Одна из проблем заключается в том, что почти все страницы используют главную страницу. Таким образом, нет тега <body> для использования в плагине html-webpack-plugin.

Если бы я имел дело с небольшим количеством записей, у меня не было бы проблем с использованием нескольких шаблонов html-webpack-plugin для вставки скриптов и размещения выходных файлов в правильном месте в структуре папок проекта. Но есть 50 страниц ASPX в разных местах в структуре папок проекта. Так что я бы очень хотел не использовать отдельные шаблоны для всех этих страниц.

Но, учитывая, что ни в одном из этих файлов нет тегов <body>, как мне вставить сценарии в нужное место?

Я создал собственный генератор кода для чтения всех aspx-страниц в проекте и поиска ссылок на Script.ashx. Затем он анализирует строку запроса, разделенную запятыми, и создает сопутствующий файл .js с одним оператором импорта для каждого из ссылочных сценариев. Эти сопутствующие файлы .js будут теми, на которые есть ссылки в массиве "entry" веб-пакета. Так, например, /home.aspx получает сопутствующий файл /home-entry.js. Этот файл находится в конфигурации веб-пакета: entry { "home" : "./home-entry", ... }. И соответствующий Script.ashx закомментирован на исходной странице aspx. Я также создаю код для массива webpack entry и ссылок html-webpack-plugin для каждого entry в массив 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
} ),

дом-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, чтобы он вставлял в определенный тег. То есть я хочу найти конкретный тег <asp:Content ID="Content6" ContentPlaceHolderID="footerPlaceHolder" runat="server"> и вставить в него теги сценария. Обратите внимание, что существуют другие теги <asp:Content>, которые имеют разные значения ContentPlaceHolderID. Так что html-webpack-plugin должен найти тот, у которого ContentPlaceHolderID="footerPlaceHolder".

Фактический результат: я полагаю, что при использовании стандартных параметров плагина html-webpack-plugin, при отсутствии тега <body>, плагин будет помещать скрипты в конец файла. Что запутает asp.net.

...