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

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

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

html+css+js=index.html

Как мне упаковать html, css и js в один index.html, чтобы я мог избежать накладных расходов на странице?

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

Спасибо за любое направление.

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Вы можете сделать это:

<link rel="stylesheet" href="YourCssFile.css">

<script src="YourJavascriptFile.js"></script>

<!--Your HTML code -->