Nach der Webpack-Verpackung wird die JS-Datei eingeführt. Zu diesem Zeitpunkt sind der Name und der Pfad der JS-Datei im HTML falsch muss gepackt werden und die HTML-Datei muss gepackt werden. Der Pfad zur importierten js-Datei wurde ersetzt.
Die Vorteile der Verwendung von Webpack zum Packen von HTML sind:
(1) Die gepackte JS-Datei kann automatisch in HTML eingefügt werden.
(2) Nach dem Packen des HTML wird es weiterhin im Build-Ordner generiert und mit der gepackten JS-Datei zusammengestellt. Wenn wir also online gehen, müssen Sie nur die durch das Packen generierten Ordner in die Online-Umgebung kopieren
(3). Dies hilft uns
1. Installieren Sie das
Webpack nativ kann nur JS- und JSON-Dateien verstehen und muss das Packen anderer Dateien unterstützen. Für alle Dateitypen muss das entsprechende Plug-In oder Loader installiert werden.
Wenn wir HTML-Dateien verpacken müssen, müssen wir zuerst html-webpack-plugin installieren:
npm install html-webpack-plugin -D
Die Rolle dieses Plug-ins:
Erstellen Sie standardmäßig eine HTML-Datei unter dem Export. und dann alle JS/CSS-Ressourcen importieren.
Sie können auch selbst eine HTML-Datei angeben und Ressourcen zu dieser HTML-Datei hinzufügen.
Webpack
html-webpack-plugin müssen Sie dies tun Konfigurieren Sie es in der Datei webpack.config.js :
// ...
// 1. Einführung des Plug-Ins const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. Konfigurieren Sie die Plug-In-Plugins in Plugins: [
neues HtmlWebpackPlugin({
template: 'index.html', // Geben Sie die Eintragsvorlagendatei an (relativ zum Projektstammverzeichnis)
Dateiname: 'index.html', // Geben Sie den Namen und den Speicherort der Ausgabedatei an (relativ zum Ausgabeverzeichnis)
// Weitere Konfigurationselemente des Plug-Ins finden Sie in der offiziellen Dokumentation des Plug-Ins})
]
} Detaillierter Konfigurationslink: https://www.npmjs.com/package/html-webpack-plugin
Stellen Sie sicher, dass der Pfad und der Dateiname der Eintragsvorlagendatei mit der Konfiguration übereinstimmen, und beginnen Sie dann mit der Kompilierung.
3. Bei der Konfiguration mehrerer JS-Einträge und mehrerer HTML-Situationen
müssen mehrere HTML-Dateien kompiliert werden, und die Dateien müssen unterschiedliche JS-Dateien importieren. chunk können jedoch alle gepackten JS-Dateien in die gepackte HTML-Datei importiert werden angegeben, um JS zu verteilen.
const path = require('path');
// 1. Einführung des Plug-Ins const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// 2. JS-Eintrag konfigurieren (mehrere Einträge)
Eintrag: {
Anbieter: ['./src/jquery.min.js', './src/js/common.js'],
index: './src/index.js',
Warenkorb: './src/js/cart.js'
},
//Exportausgabe konfigurieren: {
Dateiname: '[Name].js',
Pfad: path.resolve(__dirname, 'build/js')
},
// 3. Plug-Ins konfigurieren: [
neues HtmlWebpackPugin({
Vorlage: 'index.html',
Dateiname: 'index.html',
// Verwenden Sie chunk, um anzugeben, welche JS-Dateien importiert werden sollen chunk: ['index', 'vendor']
}),
// Wie viele HTMLs müssen kompiliert werden, wie viele neue Plug-Ins werden benötigt new HtmlWebpackPlugin({
Vorlage: './src/cart.html',
Dateiname: 'cart.html',
chunk: ['cart', 'vendor']
})
]
} Tipp: Hier ist zu beachten, wie viele HTML-Dateien Sie kompilieren müssen und wie oft Sie ein neues
HtmlWebpackPluginbenötigen.
Nachdem die obige Konfiguration erfolgreich kompiliert wurde, lautet die Ausgabe wie folgt:
build
|__ index.html #Führen Sie index.js und Vendor.js ein
|__ cart.html #Cart.js und Vendor.js einführen
|__ js
|__ seller.js # Generiert von jquery.min.js und common.js |__ index.js # Generiert von index.js |__ cart.js # Generiert von cart.js für 1, Webpack. config. js-Konfiguration
const HTMLWebpackPlugin = require('html-webpack-plugin')
...
Plugins: [
// html-webpack-plugin HTML-Paketkonfiguration Dieses Plug-in generiert eine HTML5-Datei für Ihr neues HTMLWebpackPlugin({
template: „./index.html“, // Relativer oder absoluter Pfad, der zur Vorlage gepackt wird (Paketierungsziel)
title: 'Home', // Titel, der für den generierten HTML-Dokument-Hash verwendet wird: true, //true hängt den eindeutigen Webpack-Kompilierungs-Hash an alle enthaltenen Skripte und CSS-Dateien an. Wird hauptsächlich zum Löschen des Caches verwendet.
minify: { // HTML komprimieren
collapseWhitespace: true, // Leerzeichen reduzieren keepClosingSlash: true, // Lücken geschlossen halten RemoveComments: true, // Kommentare entfernen RemoveRedundantAttributes: True, // Redundante Attribute entfernen RemoveScriptTypeAttributes: True, // Skripttypattribute entfernen RemoveStyleLinkTypeAttributes: True, // Löschen Sie das Style-Link-Typ-Attribut useShortDoctype: true, // Verwenden Sie den kurzen Dokumenttyp retainLineBreaks: true, // Zeilenumbrüche beibehalten minifyCSS: true, // In-Text-CSS komprimieren
minifyJS: true, // In-Text-JS komprimieren
}
}),
],
... 2. Zu diesem Zeitpunkt unser index.html
<!DOCTYPE html>
<html lang="">
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDemo</title>
</head>
<Körper>
<div id="app">
HTML-Paketkonfiguration</div>
</body>
</html> 3. Zu diesem Zeitpunkt importiert
unser index.js
'./../css/index.less'
Funktion add(x,y) {
gib x+y zurück
}
console.log(add(2,3)); 3. Geben Sie das Paket in das Konsolen-Webpack ein und stellen Sie fest, dass die Paketausgabedatei eine zusätzliche index.html enthält. Der Inhalt lautet wie folgt:
<!DOCTYPE html>
<html lang="">
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpackDemo</title>
<script defer src="index.js"></script></head>
<Körper>
<div id="app">
HTML-Paketkonfiguration</div>
</body>
</html> <script defer="" src="index.js"></script> wird automatisch in
den Browser eingeführt, um die gepackte Ausgabe index.html zu öffnen. Es wurde festgestellt, dass der Stil und die Steuerung eine Wirkung haben Gerät gibt auch normal aus:
