Wie agglify die Vermögenswerte für statische HTML und Bundle js auf einmal mit Webpack?

Question

Ich habe eine Homepage (index.html), die eine statische HTML mit seinen Assets ist, und nach der Benutzeranmeldung auf der Homepage, wird es auf die zweite Seite gehen (home.html), die eine Reaktion App ist.

Meine Ordnerstruktur ist wie folgt:

--build/ 
----index.html 
----home.html 
----home.bundle.js 
----assets/ 
------index.css 
------index.js 

--src/ 
----static/ 
------index.html 
------home.html 
------assets/ 
--------homepage.css 
--------homepage.js 
----components/ 
------home.js 

ich verwenden möchte webpack zu:
1. minify das Vermögen der index.html
2. Bündel der index.js App.

Meine Fragen sind:
1. Was ich alle Vermögenswerte von index.html bündeln und nicht nur hässlich machen? Ist das ein besserer Ansatz?
2. Wie verwende ich Webpack, um die oben genannten 2 Anforderungen zu erfüllen? Ich weiß, wie man ein reines SPA bündelt, weiß aber nicht, wie man mit diesem gemischten Typ umgeht.

Dank

Answer 1

Sie können keine HTML-Datei verunstalten (sonst ich heute etwas lernen ;-)), aber Sie können Ihr Javascript verunstalten die Größe zu reduzieren und eine bessere Leistung ermöglichen, wenn sie in die geladen sind Browser.

So, was Sie für den Start tun können, ist es auch zu bündeln alle Ihre Javascript in einem Bundle-Datei, die Sie manuell in Ihre HTML-Datei einfügen. Sie können dies tun, weil wir im Allgemeinen einen statischen Namen (z. B. bundle.js) für das von webpack erzeugte Bundle vergeben.

Hoffe, dass s Ihre Frage beantwortet?

Romain