Was sind die Verwendungszwecke des HTML-Webpack-Plugins?

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

rrree

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

1. true: Standardwert, das Skript-Tag befindet sich am Ende des Textkörpers der HTML-Datei

2. body: Wie true

3. head: Das Skript-Tag befindet sich im Head-Tag

4. false: Do Fügen Sie nicht die generierte JS-Datei ein, sondern generieren Sie einfach eine HTML-Datei

5. 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}“.

1. 'Abhängigkeit' Sortieren Sie natürlich nach den Abhängigkeiten verschiedener Dateien.

2. 'auto'-Standardwert, die integrierte Sortiermethode des Plug-Ins, ich bin mir über die spezifische Reihenfolge hier nicht sicher ...

3. 'keine 'Störung? Nicht sicher...

4. {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!