Как связать html, js и css в один html файл с помощью webpack?

Я создал свое приложение с помощью webpack, объединив все css в один файл, все js в один файл и имея один html для своего приложения SPA.

Когда я провожу тестирование с помощью webpagetest, большинство моих проблем связано не с загрузкой файлов, а с загрузкой их как отдельных файлов.

html+css+js=index.html

Как упаковать html, css и js в один файл index.html, чтобы избавиться от накладных расходов на http?

Webpack или любой плагин webpack лучше, так как мы его уже используем.

Спасибо за любое направление по этому поводу.


webpack javascript html css webpagetest
person Kannaiyan    schedule 21.10.2017    source источник

Ответы (2)


arrow_upward
27
arrow_downward

Я использую html-webpack-plugin для ввода вывода из Webpack в файл index.html.

Предполагая, что вы хотите встроить все эти файлы в один http-запрос index.html, вы можете использовать html-webpack-inline-source-plugin для этого.

person andykenward    schedule 22.10.2017
comment
Это похоже на решение, попробую. - person Kannaiyan; 22.10.2017
comment
проголосовал! вопрос новичка здесь, зачем мне добавлять html в webpack, я думал, что нас интересует только оптимизация css и js для уменьшения сетевых запросов - person PirateApp; 19.12.2018
comment
@PirateApp плагин html-webpack-plugin делает гораздо больше, чем просто уменьшает размер файла index.html вашей записи, который загружает .js и .css. Это слишком много, чтобы охватить в комментарии. Но основное его использование заключается в том, чтобы помочь обновить файл .html выводом из веб-пакета, если вы хешируете выходные данные, например, main.1s8h3.css. Это имеет тенденцию меняться при каждой сборке веб-пакета, когда вы меняете исходный CSS. Он также поддерживает языки HTML-шаблонов и имеет множество плагинов github.com/jantimon/html-webpack. -plugin#плагины - person andykenward; 19.12.2018
comment
Примечание. Чтобы он работал в Webpack 4, необходимо выполнить дополнительные действия: github.com/DustinJackson/html-webpack-inline-source-plugin/ - person phil294; 29.07.2019
comment
В пакете сказано, что он больше не поддерживается, и Facebook предоставляет аналогичный плагин. Я не нахожу, чтобы кто-нибудь говорил об этом плагине. - person Yairopro; 05.07.2020

arrow_upward
6
arrow_downward

бессовестный штекер входящий

Я нашел веб-пакет слишком тяжелым, особенно когда я уже использую браузер, чтобы встроить свои require(). Поэтому я написал ~30-строчный пакет npm cli, используя JS string.replace: https://www.npmjs.com/package/inline-scripts. Использование, $ inline-scripts src/index.html out/index.html

person junvar    schedule 20.02.2019
comment
Здравствуйте, почему ваш код не является открытым исходным кодом, пожалуйста? - person BastienSander; 22.10.2020
comment
Это github.com/mahhov/inline-scripts, я просто не связал репозиторий git в npm package.json - person junvar; 22.10.2020