Introduction détaillée au plugin html-webpack-tutoriel HTML-php.cn

Introduction

Récemment, j'ai utilisé pour la première fois le plug-in html-webapck-plugin dans un projet React. Les deux fonctions principales de ce plug-in sont :

Pour. Les ressources externes introduites dans les fichiers HTML, telles que le script et le lien, ajoutent dynamiquement le hachage après chaque compilation pour éviter le problème de référencement des fichiers externes mis en cache.

peut générer et créer des fichiers d'entrée HTML. Par exemple, une seule page peut. générer une entrée de fichier html et configurer N html-webpack-plugins. Peut générer N entrées de page

Avec ce plug-in, des problèmes similaires à ceux ci-dessus peuvent être facilement résolus dans le projet.

J'utilise html-webpack-plugin dans mon projet. Comme je ne connais pas ce plugin, j'ai rencontré l'un ou l'autre problème lors du processus de développement.

html-webpack-plugin

La fonction de base du plug-in est de générer des fichiers html. Le principe est très simple :

Insérer l'entrée pertinente de la configuration `entry` dans webpack et le style css extrait par `extract-text-webpack-plugin` dans la configuration `template` ou `templateContent` élément fourni par le plug-in Générer un fichier html basé sur le contenu spécifié La méthode d'insertion spécifique consiste à insérer le style `link` dans l'élément `head` et `script` dans `head` ou `body`.

Vous pouvez instancier le plug-in sans configurer aucun paramètre, par exemple comme suit :

var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
    
webpackconfig = {
    ...    plugins: [        new HtmlWebpackPlugin()
    ]}

Copier après la connexion

Si le plug-in html-webpack-plugin n'est configuré avec aucun options, il sera par défaut webpack. Dans la configuration de l'entrée, tous les styles CSS extraits par l'entrée thunk et extract-text-webpack-plugin sont insérés à l'emplacement spécifié dans le fichier. Par exemple, le contenu du fichier html généré ci-dessus est le suivant :

<!DOCTYPE html><html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="index-af150e90583a89775c77.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="common-26a14e7d42a7c7bbc4c2.js"></script>
  <script type="text/javascript" src="index-af150e90583a89775c77.js"></script></body></html>

Copier après la connexion

Bien entendu, des éléments de configuration spécifiques peuvent être utilisés pour personnaliser certains besoins particuliers. Alors, quels sont les éléments de configuration du plug-in. ?

Éléments de configuration html-webpack-plugin

Le plug-in fournit de nombreux éléments de configuration. Les éléments de configuration spécifiques peuvent être vus à partir du code source comme suit :

this.options = _.extend({
    template: path.join(__dirname, &#39;default_index.ejs&#39;),
    filename: &#39;index.html&#39;,
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: &#39;all&#39;,
    excludeChunks: [],
    title: &#39;Webpack App&#39;,
    xhtml: false
  }, options);

Copier après la connexion

<🎜. >title : Générer Le titre du document html. Configurez cet élément, il ne remplacera pas le contenu de l'élément title dans le fichier modèle spécifié, à moins que la syntaxe du moteur de modèle ne soit utilisée dans le fichier modèle HTML pour obtenir la valeur de l'élément de configuration, comme indiqué dans le formulaire de syntaxe de modèle ejs suivant. :

<title>{%= o.htmlWebpackPlugin.options.title %}</title>

Copier après la connexion

filename : Le nom du fichier de sortie. La valeur par défaut est index.html S'il n'est pas configuré, ce sera le nom du fichier. De plus, vous pouvez également spécifier l'emplacement du répertoire. fichier de sortie (tel que 'html/index.html')

À propos du nom de fichier Deux points supplémentaires :

1 Le répertoire de fichiers html configuré par nom de fichier est relatif au chemin webpackConfig.output.path. , et non par rapport à la structure actuelle du répertoire du projet.

2. Spécifiez que les chemins des liens et des scripts dans le contenu du fichier HTML généré sont relatifs au répertoire de génération. Lors de l'écriture du chemin, veuillez écrire le chemin relatif au répertoire de génération.

modèle : l'emplacement du fichier de modèle local, prend en charge les chargeurs (tels que handlebars, ejs, undersore, html, etc.), tels que handlebars!src/index.hbs ; quelques points supplémentaires sur le modèle :

1. Lorsque l'élément de configuration du modèle utilise un chargeur de fichiers dans le fichier html, l'emplacement spécifié est introuvable, ce qui fait que le contenu du fichier html généré n'est pas le contenu attendu.

2. Si le fichier modèle spécifié pour le modèle ne spécifie aucun chargeur, ejs-loader sera utilisé par défaut. Par exemple, template : './index.html', si aucun chargeur n'est spécifié pour .html, utilisez ejs-loader

templateContent: string|function, qui peut spécifier le contenu du modèle et ne peut pas coexister avec modèle. Lorsque la valeur de configuration est fonction, vous pouvez renvoyer directement une chaîne HTML ou l'appeler de manière asynchrone pour renvoyer une chaîne HTML.

inject : injectez toutes les ressources statiques dans template ou templateContent. Les emplacements d'injection pour différentes valeurs de configuration sont différents.

1. true ou body : toutes les ressources JavaScript sont insérées en bas de l'élément body

2. head : toutes les ressources JavaScript sont insérées dans l'élément head

false : toutes les ressources statiques. css et JavaScript ne seront pas injectés dans le fichier modèle

favicon : ajoutez un chemin de favicon spécifique au document html de sortie. C'est la même chose que l'élément de configuration du titre, et sa valeur de chemin doit être dynamique. obtenu dans le modèle

hash : true |false, s'il faut ajouter la valeur de hachage unique générée par webpack pour chaque ressource statique injectée La forme de hachage est la suivante :

html

chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；

excludeChunks: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。

chunksSortMode: none | auto| function，默认auto；允许指定的thunk在插入到html文档前进行排序。
>function值可以指定具体排序规则；auto基于thunk的id进行排序； none就是不排序

xhtml: true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签

cache: true|fasle, 默认true；如果为true表示在对应的thunk文件修改后就会emit文件

showErrors: true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。

minify: {....}|false；传递 html-minifier 选项给 minify 输出，false就是不使用html压缩。

下面的是一个用于配置这些属性的一个例子：

 new HtmlWebpackPlugin({
          title:&#39;rd平台&#39;,
          template: &#39;entries/index.html&#39;, // 源模板文件
          filename: &#39;./index.html&#39;, // 输出文件【注意：这里的根路径是module.exports.output.path】
          showErrors: true,
          inject: &#39;body&#39;,
          chunks: ["common",&#39;index&#39;]      })

Copier après la connexion

配置多个html页面

html-webpack-plugin的一个实例生成一个html文件，如果单页应用中需要多个页面入口，或者多页应用时配置多个html时，那么就需要实例化该插件多次；

即有几个页面就需要在webpack的plugins数组中配置几个该插件实例：

  ...
    plugins: [        new HtmlWebpackPlugin({
             template: &#39;src/html/index.html&#39;,
              excludeChunks: [&#39;list&#39;, &#39;detail&#39;]        }),
        new HtmlWebpackPlugin({
            filename: &#39;list.html&#39;,
            template: &#39;src/html/list.html&#39;,
            thunks: [&#39;common&#39;, &#39;list&#39;]        }), 
        new HtmlWebpackPlugin({
          filename: &#39;detail.html&#39;,
          template: &#39;src/html/detail.html&#39;,
           thunks: [&#39;common&#39;, &#39;detail&#39;]        })
    ]
    ...

Copier après la connexion

如上例应用中配置了三个入口页面：index.html、list.html、detail.html；并且每个页面注入的thunk不尽相同；类似如果多页面应用，就需要为每个页面配置一个；

配置自定义的模板

不带参数的html-webpack-plugin默认生成的html文件只是将thunk和css样式插入到文档中，可能不能满足我们的需求；

另外，如上面所述，三个页面指定了三个不同html模板文件；在项目中，可能所有页面的模板文件可以共用一个，因为html-webpack-plugin插件支持不同的模板loader，所以结合模板引擎来共用一个模板文件有了可能。

所以，配置自定义模板就派上用场了。具体的做法，借助于模板引擎来实现，例如插件没有配置loader时默认支持的ejs模板引擎，下面就以ejs模板引擎为例来说明；

例如项目中有2个入口html页面，它们可以共用一个模板文件，利用ejs模板的语法来动态插入各自页面的thunk和css样式，代码可以这样：

<!DOCTYPE html><html style="font-size:20px"><head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (var css in htmlWebpackPlugin.files.css) { %>
    <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
    <% } %></head><body><div id="app"></div>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script type="text/javascript" src=\&#39;#\&#39;" /script><% } %></body></html>

Copier après la connexion

你可能会对代码中的上下文htmlWebpackPlugin数据感到迷惑，这是啥东东？其实这是html-webpack-plugin插件在生成html文件过程中产生的数据，这些数据对html模板文件是可用的。

自定义模板上下文数据

html-webpack-plugin在生成html文件的过程中，插件会根据配置生成一个对当前模板可用的特定数据，模板语法可以根据这些数据来动态生成html文件的内容。

那么，插件生成的特殊数据格式是什么，生成的哪些数据呢？从源码或者其官网都给出了答案。从源码中可以看出模板引擎具体可以访问的数据如下:

var templateParams = {
        compilation: compilation,
        webpack: compilation.getStats().toJson(),
        webpackConfig: compilation.options,
        htmlWebpackPlugin: 
          files: assets,
          options: self.options
        }
      };

Copier après la connexion

从中可以看出，有四个主要的对像数据。其中compilation为所有webpack插件提供的都可以访问的一个编译对象，此处就不太做介绍，具体可以自己查资料。下面就对剩下的三个对象数据进行说明。

webpack

webpack的stats对象；注意一点：

这个可以访问的stats对象是htm文件生成时所对应的stats对象，而不是webpack运行完成后所对应的整个stats对象。

webpackConfig

webpack的配置项；通过这个属性可以获取webpack的相关配置项，如通过webpackConfig.output.publicPath来获取publicPath配置。当然还可以获取其他配置内容。

htmlWebpackPlugin

html-webpack-plugin插件对应的数据。它包括两部分：

htmlWebpackPlugin.files: 此次html-webpack-plugin插件配置的chunk和抽取的css样式。该files值其实是webpack的stats对象的assetsByChunkName属性代表的值，该值是插件配置的chunk块对应的按照webpackConfig.output.filename映射的值。例如对应上面配置插件各个属性配置项例子中生成的数据格式如下：

"htmlWebpackPlugin": {
  "files": {
    "css": [ "inex.css" ],
    "js": [ "common.js", "index.js"],
    "chunks": {
      "common": {
        "entry": "common.js",
        "css": [ "index.css" ]      },
      "index": {
        "entry": "index.js",
        "css": ["index.css"]      }
    }
  }}

Copier après la connexion

这样，就可以是用如下模板引擎来动态输出script脚本

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script type="text/javascript" src=\&#39;#\&#39;" /script><% } %>

Copier après la connexion

htmlWebpackPlugin.options: 传递给插件的配置项，具体的配置项如上面插件配置项小节所描述的。

插件事件

不知道你发现没有，html-webpack-plugin插件在插入静态资源时存在一些问题：

在插入js资源只能插入head或者body元素中，不能一些插入head中，另一些插入body中

不支持在html中文件内联*，例如在文件的某个地方用来内联外部脚本

为此，有人专门给插件作者提问了这个问题；对此插件作者提供了插件事件，允许其他插件来改变html文件内容。具体的事件如下：

Async（异步事件）:

* html-webpack-plugin-before-html-generation
    * html-webpack-plugin-before-html-processing
    * html-webpack-plugin-alter-asset-tags
    * html-webpack-plugin-after-html-processing
    * html-webpack-plugin-after-emit

Copier après la connexion

Sync（同步事件）:

    * html-webpack-plugin-alter-chunks

Copier après la connexion

这些事件是提供给其他插件使用的，用于改变html的内容。因此，要用这些事件需要提供一个webpack插件。例如下面定义的MyPlugin插件。

function MyPlugin(options) {
  // Configure your plugin with options...}MyPlugin.prototype.apply = function(compiler) {
  // ...
  compiler.plugin(&#39;compilation&#39;, function(compilation) {
    console.log(&#39;The compiler is starting a new compilation...&#39;);

    compilation.plugin(&#39;html-webpack-plugin-before-html-processing&#39;, function(htmlPluginData, callback) {
      htmlPluginData.html += &#39;The magic footer&#39;;
      callback(null, htmlPluginData);
    });
  });};module.exports = MyPlugin;

Copier après la connexion

然后，在webpack.config.js文件中配置Myplugin信息：

plugins: [  new MyPlugin({options: &#39;&#39;})
]

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!