Dieser Artikel stellt hauptsächlich die detaillierte Verwendung des HTML-Webpack-Plugins vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.
html-webpack-plugin Vielleicht haben alle Webpack-Kinder, die es verwendet haben, dieses Plugin verwendet, und selbst wenn sie es noch nicht verwendet haben, haben sie vielleicht schon davon gehört. Wenn wir Webpack lernen, sehen wir möglicherweise häufig einen Code wie diesen.
// webpack.config.js
module.exports = {
entry: path.resolve(__dirname, './app/index.js'),
output:{
path: path.resolve(__dirname, './build'),
filename: 'bundle.js'
}
...
plugins: [
new HtmlWebpackPlugin()
]
}Nach der Eingabe des Webpack-Befehls im Terminal
webpack
werden Sie auf magische Weise sehen, dass eine index.html-Datei und ein Bundle in Ihrem Build-Ordner js generiert werden Datei, und die von Webpack generierte Datei bundle.js wird automatisch in der Datei index.html referenziert.
All dies ist das Ergebnis des HTML-Webpack-Plugins. Es generiert automatisch eine HTML-Datei für Sie und verweist auf zugehörige Asset-Dateien (z. B. CSS, JS).
Ich bin im Juni zum ersten Mal mit der automatisierten Front-End-Konstruktion in Kontakt gekommen. Als ich Webpack und React gelernt habe, habe ich dieses Plug-in nur kurz verwendet. Heute werde ich dem folgen offizielle Dokumentation, um alle Verwendungsmöglichkeiten zu sehen.
Titel
Wie der Name schon sagt, legen Sie den Titel der generierten HTML-Datei fest.
Dateiname
Es gibt nichts zu sagen, den Dateinamen der generierten HTML-Datei. Der Standardwert ist index.html.
template
generiert eine spezifische HTML-Datei basierend auf Ihrer eigenen angegebenen Vorlagendatei. Der Vorlagentyp kann hier eine beliebige Vorlage sein, es kann HTML, Jade, EJS, HBS usw. sein. Beachten Sie jedoch, dass Sie bei Verwendung einer benutzerdefinierten Vorlagendatei den entsprechenden Loader im Voraus installieren müssen, andernfalls Webpack wird beim Parsen nicht richtig funktionieren. Nehmen wir zum Beispiel Jade.
npm install jade-loader --save-dev
Schließlich werden die Dateien yourfile.html und bundle.js im Build-Ordner generiert. Schauen wir uns nun noch einmal das Titelattribut an, das wir zuvor verwendet haben.
Wenn Sie sowohl die Vorlagenoption als auch die Titeloption angeben, welche wird vom Webpack ausgewählt? Tatsächlich wird zu diesem Zeitpunkt der Titel der von Ihnen angegebenen Vorlagendatei ausgewählt, auch wenn der Titel in Ihrer Vorlagendatei nicht festgelegt ist.
Was ist mit dem Dateinamen? Wird er auch überschrieben? Nein, der angegebene Dateiname wird tatsächlich als Dateiname verwendet.
Injizieren
Injizieren-Option. Es gibt vier Optionen: true, body, head, false
true: Standardwert, das Skript-Tag befindet sich am Ende des Textkörpers der HTML-Datei
body: Wie true
head: Das Skript-Tag befindet sich im Head-Tag
false: Do Fügen Sie nicht die generierte JS-Datei ein, sondern generieren Sie einfach eine HTML-Datei
Favicon: Generieren Sie ein Favicon für die generierte HTML-Datei. Der Attributwert ist der Pfadname der Favicon-Datei.
// webpack.config.js
...
loaders: {
...
{
test: /\.jade$/,
loader: 'jade'
}
}
plugins: [
new HtmlWebpackPlugin({
...
jade: 'path/to/yourfile.jade'
})
]Das generierte HTML-Tag enthält ein solches Link-Tag
// webpack.config.js
...
plugins: [
new HtmlWebpackPlugin({
...
favicon: 'path/to/yourfile.ico'
})
]Gleich wie Titel und Dateiname, wird dieses Attribut ignoriert .
minify
minify wird zum Komprimieren von HTML-Dateien verwendet. Der Attributwert von minify ist eine Komprimierungsoption oder false. Der Standardwert ist false und die generierte HTML-Datei wird nicht komprimiert. Werfen wir einen Blick auf diese Komprimierungsoption.
html-webpack-plugin integriert html-minifier intern. Diese Komprimierungsoption ist genau die gleiche wie die von html-minify.
Sehen Sie sich ein einfaches Beispiel an.
<link rel="shortcut icon" href="example.ico" rel="external nofollow" >
// webpack.config.js
...
plugins: [
new HtmlWebpackPlugin({
...
minify: {
removeAttributeQuotes: true // 移除属性的引号
}
})
]<!-- 原html片段 --> <p id="example" class="example">test minify</p>
Hash
Die Funktion der Hash-Option besteht darin, der generierten JS-Datei einen eindeutigen Hash-Wert zu geben, der dieses Mal der vom Webpack kompilierte Hash-Wert ist. Der Standardwert ist false . Schauen wir uns auch ein Beispiel an.
<!-- 生成的html片段 --> <p id=example class=example>test minify</p>
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
...
hash: true
})
]Nachdem Sie den Webpack-Befehl ausgeführt haben, werden Sie feststellen, dass sich die js-Datei, auf die im Skript-Tag Ihrer generierten HTML-Datei verwiesen wird, etwas geändert hat.
Die Zeichenfolge von Hash-Werten, die auf die Datei bundle.js folgt, ist der Hash-Wert, der dieser Webpack-Kompilierung entspricht.
<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
cache
Der Standardwert ist wahr. Gibt an, dass nur dann eine neue Datei generiert wird, wenn sich der Inhalt ändert.
showErrors
Die Funktion von showErrors besteht darin, dass Webpack die Fehlerinformationen in ein Pre-Tag einschließt, wenn während der Webpack-Kompilierung ein Fehler auftritt. Der Standardwert des Attributs ist wahr und es wird nur eine Fehlermeldung angezeigt.
Chunks
Chunks-Option ist hauptsächlich für Dateien mit mehreren Einträgen vorgesehen. Wenn Sie über mehrere Eintragsdateien verfügen, werden entsprechend mehrere kompilierte JS-Dateien generiert. Dann kann die Chunks-Option bestimmen, ob diese generierten JS-Dateien verwendet werden sollen.
Chunks verweisen standardmäßig auf alle JS-Dateien in der generierten HTML-Datei. Natürlich können Sie auch angeben, welche spezifischen Dateien importiert werden sollen.
Sehen Sie sich ein kleines Beispiel an.
$ webpack Hash: 22b9692e22e7be37b57e Version: webpack 1.13.2
Nachdem Sie den Webpack-Befehl ausgeführt haben, werden Sie sehen, dass die generierte Datei index.html nur auf index.js und index2.js verweist.
// webpack.config.js
entry: {
index: path.resolve(__dirname, './src/index.js'),
index1: path.resolve(__dirname, './src/index1.js'),
index2: path.resolve(__dirname, './src/index2.js')
}
...
plugins: [
new HtmlWebpackPlugin({
...
chunks: ['index','index2']
})
]Wenn die Option chunks nicht angegeben ist, wird dies standardmäßig der Fall sein sei Alle zitieren.
excludeChunks
Nachdem man Chunks verstanden hat, ist die Option „excludeChunks“ leicht zu verstehen. Sie ist das Gegenteil von Chunks und schließt bestimmte js-Dateien aus. Das obige Beispiel entspricht beispielsweise tatsächlich der folgenden Zeile:
... <script type=text/javascript src=index.js></script> <script type=text/javascript src=index2.js></script>
chunksSortMode
Diese Option bestimmt die Referenzreihenfolge von Skript-Tags. Standardmäßig gibt es vier Optionen: „none“, „auto“, „dependency“, „{function}“.
'Abhängigkeit' Sortieren Sie natürlich nach den Abhängigkeiten verschiedener Dateien.
'auto'-Standardwert, die integrierte Sortiermethode des Plug-Ins, ich bin mir über die spezifische Reihenfolge hier nicht sicher ...
'keine 'Störung? Nicht sicher...
{function} Stellt eine Funktion bereit? Aber was sind die Parameter der Funktion? Nicht sicher...
Wenn es Schüler gibt, die diese Option verwendet haben oder ihre spezifische Bedeutung kennen, lassen Sie es mich bitte wissen. . .
xhtml
Ein boolescher Wert ist „false“, wenn „true“ auf die Datei im xhtml-kompatiblen Modus verwiesen wird.
Zusammenfassung
Das Obige fasst die in new HtmlWebpackPlugin() übergebenen Optionen zusammen. Nachdem Sie die Bedeutung aller Optionen verstanden haben, können Sie sie beim Erstellen des Projekts flexibler verwenden. Ich hoffe, dass es allen beim Lernen hilft, und ich hoffe auch, dass jeder Script Home unterstützt.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Anleitung zur Verwendung von Schaltflächenkomponenten in WeChat-Miniprogrammen
So verwenden Sie Fortschrittskomponenten in WeChat-Miniprogrammen
Informationen zum Abrufen von JSON-Daten vom Server in der Methode $.ajax()
So laden Sie externe Webseiten oder Serverdaten mithilfe der MUI-Framework
Detaillierte Erklärung von Karma+Mocha im Vue-Unit-Test
PHP-Verschlüsse und anonyme Funktionen (ausführliches Tutorial)
So verwenden Sie die dreistufige Verknüpfungsauswahl im WeChat-Miniprogramm
Das obige ist der detaillierte Inhalt vonWas sind die Verwendungszwecke des HTML-Webpack-Plugins?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
