Comment utiliser le plug-in Installation dans des projets pratiques-js tutoriel-php.cn

Cette fois, je vais vous montrer comment utiliser le plug-in d'installation dans des projets réels, et quelles sont les précautions à prendre pour utiliser le plug-in d'installation dans des projets réels. Ce qui suit est un cas pratique, jetons un coup d'œil.

Ce plugin est utilisé pour simplifier la création de fichiers HTML qui servent des bundles webpack, notamment lorsque le nom du fichier contient une valeur de hachage, et cette valeur change à chaque fois qu'il est compilé. Vous pouvez soit laisser ce plugin vous aider à générer automatiquement des fichiers HTML, utiliser des modèles lodash pour charger les bundles générés, soit charger les bundles vous-même.

Comment utiliser le plug-in d'installation dans des projets réels

Utilisez npm pour installer ce plug-in

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

Copier après la connexion

Basique Utilisation

Ce plugin peut aider à générer des fichiers HTML. Dans l'élément body, utilisez un script pour inclure tous vos bundles webpack. Configurez-le simplement comme suit dans votre fichier de configuration webpack :

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

Copier après la connexion

<.>Ceci sera Un fichier nommé index.html sera automatiquement généré dans le répertoire dist avec le contenu suivant :

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

Copier après la connexion

Si vous avez plusieurs points d'entrée du webpack, ils seront tous inclus dans l'élément de script généré .

Si des ressources CSS sont incluses dans la sortie du webpack (par exemple, des CSS extraites à l'aide d'ExtractTextPlugin), celles-ci seront incluses dans l'élément d'en-tête de la page HTML à l'aide de liens.

Configuration

peut effectuer une série de configurations et prend en charge les informations de configuration suivantes

titre : utilisé pour générer le titre des pages élément
filename : nom du fichier HTML de sortie, la valeur par défaut est index.html, il peut également être directement configuré avec des sous-répertoires.
modèle : chemin du fichier modèle, prend en charge le chargeur, tel que html!./index.html
inject : true 'head' | 'body' | false , injecte toutes les ressources dans un modèle ou templateContent spécifique. Si défini sur true ou body, toutes les ressources javascript seront placées au bas de l'élément body et 'head' sera placé dans l'élément head.
favicon : ajoutez un chemin de favicon spécifique au fichier HTML de sortie.
minify : {} | false, passez l'option html-minifier pour minifier la sortie
hash : true false, si vrai, ajoute un hachage de construction Webpack unique pour tous les scripts et fichiers CSS inclus, utile pour la mise en cache.
cache : true | false, si vrai, c'est la valeur par défaut et le fichier ne sera publié qu'après modification du fichier.
showErrors : true | false, si vrai, c'est la valeur par défaut et le message d'erreur sera écrit sur la page HTML
morceaux : Autoriser l'ajout de certains morceaux uniquement (par exemple, uniquement les morceaux de test unitaire)
chunksSortMode : Permet de contrôler la façon dont les morceaux sont triés avant d'être ajoutés à la page. Valeurs prises en charge : 'aucun' | 'default ' | {function}-default:'auto'
excludeChunks : permet de sauter certains morceaux (par exemple, sauter des blocs de test unitaire)

L'exemple suivant montre comment utiliser ces configurations.

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

Copier après la connexion

Générer plusieurs fichiers HTML

Générer plusieurs fichiers HTML en ajoutant ce plug-in plusieurs fois dans le fichier de configuration.

{
 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'
  })
 ]
}

Copier après la connexion

Écrire un modèle personnalisé

Si le fichier HTML généré par défaut ne répond pas à vos besoins, vous pouvez créer votre propre modèle personnalisé. Un moyen pratique consiste à transmettre l'option d'injection, puis à la transmettre à un fichier HTML personnalisé. html-webpack-plugin injectera automatiquement tous les fichiers CSS, js, manifeste et favicon requis dans le balisage.

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

Copier après la connexion

fichier my-index.html

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

Copier après la connexion

Si vous disposez d'un chargeur de modèles, vous pouvez l'utiliser pour analyser ce modèle.

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

Copier après la connexion

De plus, si votre modèle est une chaîne, vous pouvez le transmettre en utilisant templateContent.

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

Copier après la connexion

Si la fonctionnalité d'injection ne répond pas à vos besoins, vous souhaitez un contrôle total sur le placement des ressources. Vous pouvez utiliser la syntaxe lodash directement, en utilisant le modèle par défaut comme point de départ pour créer votre propre modèle. L'option

templateContent peut aussi être une fonction pour utiliser d'autres langages, comme le jade :

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

Copier après la connexion

ou la version asynchrone

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

Copier après la connexion

Notez que si vous utilisez template et templateContent, le plugin générera une erreur.

变量 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": []
   },
  }
 }
}

Copier après la connexion

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

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

2、webpack: webpack 的 stats 对象。

3、webpackConfig: webpack 配置信息。

过滤块

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

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

Copier après la connexion

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

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

Copier après la connexion

事件

通过事件允许其它插件来扩展 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();
});

Copier après la connexion

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