webentwicklung-frage-antwort-db.com.de

Wie bündeln Sie HTML, JS und CSS in einer HTML-Datei mit Webpack?

Ich habe meine Anwendung mit webpack erstellt, die alle CSS in eine Datei, alle Js in eine Datei und eine HTML-Datei für meine SPA-App einfügt.

Wenn ich mit webpagetest teste, besteht das meiste meiner Probleme darin, die Dateien nicht zu laden, sondern sie als einzelne Dateien zu laden.

html+css+js=index.html 

Wie kann ich meine HTML-, CSS- und JS-Dateien in eine einzige index.html packen, so dass ich kann http-Overhead vermeiden?

Webpack oder ein beliebiges Webpack-Plugin ist besser, da wir es bereits verwenden.

Danke für jede Richtung dazu.

14
Kannaiyan

Ich verwende html-webpack-plugin injiziere die Ausgabe von Webpack in eine index.html-Datei.

Angenommen, Sie möchten all diese Dateien in eine http-Anforderung von index.html einbetten, können Sie html-webpack-inline-source-plugin verwenden, um dies zu erreichen.

12
andykenward

schamloser Stecker ankommend

Ich habe Webpack als zu schwer empfunden, vor allem, wenn ich browserify bereits zum Einbinden meiner require()s verwende. Also schrieb ich ein ~ 30 Zeilen npm cli-Paket mit JS string.replace: https://www.npmjs.com/package/inline-scripts . Verwendung, $ inline-scripts src/index.html out/index.html

0
junvar