Heim > Artikel > Web-Frontend > So verwenden Sie das Installations-Plug-in in praktischen Projekten

So verwenden Sie das Installations-Plug-in in praktischen Projekten

php中世界最好的语言Original: 2018-06-09 11:23:061447Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie das Installations-Plug-in in tatsächlichen Projekten verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Installations-Plug-ins in tatsächlichen Projekten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Dieses Plugin wird verwendet, um die Erstellung von HTML-Dateien zu vereinfachen, die Webpack-Bundles bereitstellen, insbesondere wenn der Dateiname einen Hash-Wert enthält und dieser Wert sich bei jeder Kompilierung ändert. Sie können sich entweder von diesem Plugin automatisch bei der Generierung von HTML-Dateien helfen lassen, Lodash-Vorlagen verwenden, um die generierten Bundles zu laden, oder die Bundles selbst laden.

So verwenden Sie das Installations-Plug-in in tatsächlichen Projekten

Verwenden Sie npm, um dieses Plug-in zu installieren

$ npm install html-webpack-plugin@2 --save-dev

Grundlegende Verwendung

Dieses Plugin kann dabei helfen, HTML-Dateien zu generieren. Verwenden Sie im Body-Element ein Skript, um alle Ihre Webpack-Bundles einzubinden. Konfigurieren Sie einfach Folgendes in Ihrer Webpack-Konfigurationsdatei:

var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
 entry: 'index.js',
 output: {
  path: 'dist',
  filename: 'index_bundle.js'
 },
 plugins: [new HtmlWebpackPlugin()]
}

Dies wird automatisch geschehen in dist enthalten sein Eine Datei mit dem Namen index.html wird im Verzeichnis mit dem folgenden Inhalt generiert:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
 </head>
 <body>
  <script src="index_bundle.js"></script> 
 </body>
</html>

Wenn Sie mehrere Webpack-Einstiegspunkte haben, werden diese alle in das generierte Skriptelement aufgenommen.

Wenn in der Webpack-Ausgabe CSS-Ressourcen enthalten sind (z. B. mit ExtractTextPlugin extrahiertes CSS), werden diese über Links in das Head-Element der HTML-Seite eingefügt.

Konfiguration

kann eine Reihe von Konfigurationen durchführen und unterstützt die folgenden Konfigurationsinformationen

Titel: wird zum Generieren von Seitentiteln verwendet Element
Dateiname: HTML-Dateiname ausgeben, der Standardwert ist index.html, es kann auch direkt mit Unterverzeichnissen konfiguriert werden.
Vorlage: Pfad der Vorlagendatei, unterstützt Loader, z. B. html!./index.html
inject: true | 'body' |. false , alle Ressourcen in eine bestimmte Vorlage oder einen bestimmten templateContent einfügen. Wenn auf true oder body gesetzt, werden alle Javascript-Ressourcen am Ende des Body-Elements und „head“ im Head-Element platziert.
Favicon: Fügen Sie der Ausgabe-HTML-Datei einen bestimmten Favicon-Pfad hinzu.
minify: {} |. false, übergeben Sie die HTML-Minifier-Option, um die Ausgabe zu minimieren.
hash: true | Ein einzigartiger Webpack-Build-Hash für alle enthaltenen Skripte und CSS-Dateien, nützlich zum Entcachen.
cache: true |. false, wenn true, ist dies der Standardwert und die Datei wird erst veröffentlicht, nachdem die Datei geändert wurde.
showErrors: true |. false, wenn true, ist dies der Standardwert und die Fehlermeldung wird in die HTML-Seite
chunks geschrieben : Ermöglicht das Hinzufügen nur bestimmter Blöcke (z. B. nur Unit-Test-Blöcke)
chunksSortMode: Ermöglicht die Steuerung, wie Blöcke sortiert werden, bevor sie der Seite hinzugefügt werden. Unterstützte Werte: „none“ | 'default ' |. {function}-default:'auto'
excludeChunks: Ermöglicht das Überspringen bestimmter Chunks (z. B. das Überspringen von Unit-Testblöcken)

Das folgende Beispiel zeigt, wie diese Konfigurationen verwendet werden.

{
 entry: 'index.js',
 output: {
  path: 'dist',
  filename: 'index_bundle.js',
  hash: true
 },
 plugins: [
  new HtmlWebpackPlugin({
   title: 'My App',
   filename: 'assets/admin.html'
  })
 ]
}

Generieren Sie mehrere HTML-Dateien

Generieren Sie mehrere HTML-Dateien, indem Sie dieses Plugin mehrmals in der Konfigurationsdatei hinzufügen.

{
 entry: 'index.js',
 output: {
  path: 'dist',
  filename: 'index_bundle.js'
 },
 plugins: [
  new HtmlWebpackPlugin(), // Generates default index.html 
  new HtmlWebpackPlugin({ // Also generate a test.html 
   filename: 'test.html',
   template: 'src/assets/test.html'
  })
 ]
}

Benutzerdefinierte Vorlagen schreiben

Wenn die standardmäßig generierte HTML-Datei nicht Ihren Anforderungen entspricht, können Sie Ihre eigene benutzerdefinierte Vorlage erstellen. Eine bequeme Möglichkeit besteht darin, die Injektionsoption zu übergeben und sie dann an eine benutzerdefinierte HTML-Datei zu übergeben. Das HTML-Webpack-Plugin fügt automatisch alle erforderlichen CSS-, JS-, Manifest- und Favicon-Dateien in das Markup ein.

plugins: [
 new HtmlWebpackPlugin({
  title: 'Custom template',
  template: 'my-index.html', // Load a custom template 
  inject: 'body' // Inject all scripts into the body 
 })
]

meine-index.html-Datei

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 </body>
</html>

Wenn Sie einen Vorlagenlader haben, können Sie ihn zum Parsen dieser Vorlage verwenden.

module: {
 loaders: [
  { test: /\.hbs$/, loader: "handlebars" }
 ]
},
plugins: [
 new HtmlWebpackPlugin({
  title: 'Custom template using Handlebars',
  template: 'my-index.hbs',
  inject: 'body'
 })
]

Wenn Ihr Muster außerdem eine Zeichenfolge ist, können Sie es mit templateContent übergeben.

plugins: [
 new HtmlWebpackPlugin({
  inject: true,
  templateContent: templateContentString
 })
]

Wenn die Injektionsfunktion nicht Ihren Anforderungen entspricht, möchten Sie die volle Kontrolle über die Ressourcenplatzierung haben. Sie können die lodash-Syntax direkt verwenden und dabei die Standardvorlage als Ausgangspunkt für die Erstellung Ihrer eigenen Vorlage verwenden. Die Option

templateContent kann auch eine Funktion zur Verwendung anderer Sprachen sein, z. B. jade:

plugins: [
 new HtmlWebpackPlugin({
  templateContent: function(templateParams, compilation) {
   // Return your template content synchronously here 
   return '..';
  }
 })
]

oder die asynchrone Version

plugins: [
 new HtmlWebpackPlugin({
  templateContent: function(templateParams, compilation, callback) {
   // Return your template content asynchronously here 
   callback(null, '..');
  }
 })
]

Beachten Sie Folgendes, wenn template und templateContent verwendet werden Gleichzeitig gibt das Plugin einen Fehler aus.

变量 o 在模板中是在渲染时传递进来的数据，这个变量有如下的属性：

1、htmlWebpackPlugin: 这个插件的相关数据 ◦

htmlWebpackPlugin.files: 资源的块名，来自 webpack 的 stats 对象，包含来自 entry 的从 entry point name 到 bundle 文件名映射。

"htmlWebpackPlugin": {
 "files": {
  "css": [ "main.css" ],
  "js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
  "chunks": {
   "head": {
    "entry": "assets/head_bundle.js",
    "css": [ "main.css" ]
   },
   "main": {
    "entry": "assets/main_bundle.js",
    "css": []
   },
  }
 }
}

如果在 webpack 配置文件中，你配置了 publicPath，将会反射正确的资源

htmlWebpackPlugin.options: 传递给插件的配置。

2、webpack: webpack 的 stats 对象。

3、webpackConfig: webpack 配置信息。

过滤块

可以使用 chunks 来限定特定的块。

plugins: [
 new HtmlWebpackPlugin({
  chunks: ['app']
 })
]

还可以使用 excludeChunks 来排除特定块。

plugins: [
 new HtmlWebpackPlugin({
  excludeChunks: ['dev-helper']
 })
]

事件

通过事件允许其它插件来扩展 HTML。

html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit

使用方式：

compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
 htmlPluginData.html += 'The magic footer';
 callback();
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen