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
Nach dem Login kopieren
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()]
}Nach dem Login kopieren
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>
Nach dem Login kopieren
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'
})
]
}Nach dem Login kopieren
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'
})
]
}Nach dem Login kopieren
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
})
]Nach dem Login kopieren
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>
Nach dem Login kopieren
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'
})
]Nach dem Login kopieren
Wenn Ihr Muster außerdem eine Zeichenfolge ist, können Sie es mit templateContent übergeben.
plugins: [
new HtmlWebpackPlugin({
inject: true,
templateContent: templateContentString
})
]Nach dem Login kopieren
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 '..';
}
})
]Nach dem Login kopieren
oder die asynchrone Version
plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation, callback) {
// Return your template content asynchronously here
callback(null, '..');
}
})
]Nach dem Login kopieren
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": []
},
}
}
}Nach dem Login kopieren
如果在 webpack 配置文件中，你配置了 publicPath，将会反射正确的资源
htmlWebpackPlugin.options: 传递给插件的配置。
2、webpack: webpack 的 stats 对象。
3、webpackConfig: webpack 配置信息。
过滤块
可以使用 chunks 来限定特定的块。
plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
]Nach dem Login kopieren
还可以使用 excludeChunks 来排除特定块。
plugins: [
new HtmlWebpackPlugin({
excludeChunks: ['dev-helper']
})
]Nach dem Login kopieren
事件
通过事件允许其它插件来扩展 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();
});Nach dem Login kopieren
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
vue-cli组件导入使用步骤详解
使用webpack做出ReactApp
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Installations-Plug-in in praktischen Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
