Как объединить HTML, JS и CSS в один HTML-файл с помощью Webpack? [закрыт]
Проблема: Как объединить HTML, CSS и JS в один файл с помощью Webpack для сокращения HTTP-задержки?
Я разработал свое приложение, используя Webpack, который объединяет все CSS в один файл, весь JS в другой файл и создает один HTML-файл для моего SPA (одностраничного приложения).
Во время тестирования с помощью webpagetest я заметил, что большинство проблем не связаны с загрузкой самих файлов, а с тем, что они загружаются как отдельные файлы.
Мой текущий формат:
html + css + js = index.html
Как мне упаковать HTML, CSS и JS в один единственный файлом index.html, чтобы я мог избежать HTTP-задержки?
Я предпочитаю использовать Webpack или любой плагин для Webpack, так как мы уже используем его в проекте.
Заранее спасибо за любые подсказки по этой проблеме!
1 ответ(ов)
Я обнаружил, что webpack слишком тяжелый, особенно когда я уже использую browserify для инлайн-загрузки моих require(). Поэтому я написал небольшой npm пакет на ~30 строк с использованием string.replace из JS: inline-scripts.
Вот как его использовать: введите команду $ inline-scripts src/index.html out/index.html.
Установить и получить cookie с помощью JavaScript
Добавить подсказку к элементу div
Высота, равная динамической ширине (флюидная верстка на CSS)
Несколько файлов JavaScript/CSS: лучшие практики?
Как получить границы элемента div в jQuery