Quelles sont les utilisations du plugin html-webpack ?

Cet article présente principalement l'utilisation détaillée de html-webpack-plugin. Maintenant, je le partage avec vous et le donne comme référence.

html-webpack-plugin Peut-être que tous les enfants du webpack qui l'ont utilisé ont utilisé ce plugin, et même s'ils ne l'ont pas utilisé, ils en ont peut-être entendu parler. Lorsque nous apprenons le webpack, nous pouvons souvent voir un morceau de code comme celui-ci.

// webpack.config.js
module.exports = {
  entry: path.resolve(__dirname, './app/index.js'),
  output:{
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  }
  ...
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

Après avoir entré la commande webpack dans le terminal

webpack

Vous verrez comme par magie qu'un fichier index.html et un fichier index.html seront générés dans votre dossier de construction. fichier bundle.js et le fichier index.html fait automatiquement référence au fichier bundle.js généré par webpack.

Tout cela est le résultat de html-webpack-plugin. Il générera automatiquement un fichier HTML pour vous et référencera les fichiers d'actifs associés (tels que CSS, JS).

Je suis entré en contact pour la première fois avec la construction automatisée frontale en juin lorsque j'apprenais webpack et React, j'ai brièvement utilisé ce plug-in, mais je n'ai utilisé que quelques options courantes. Aujourd'hui, je vais suivre le. documentation officielle , pour voir toutes ses utilisations.

titre

Comme son nom l'indique, définissez le titre du fichier html généré.

nom du fichier

Il n'y a rien à dire, le nom du fichier html généré. La valeur par défaut est index.html.

template

génère un fichier HTML spécifique basé sur votre propre fichier modèle spécifié. Le type de modèle ici peut être n'importe quel modèle que vous aimez, il peut être html, jade, ejs, hbs, etc., mais il convient de noter que lorsque vous utilisez un fichier de modèle personnalisé, vous devez installer le chargeur correspondant à l'avance, sinon webpack ne fonctionnera pas correctement analyser. Prenez le jade par exemple.

npm install jade-loader --save-dev

// webpack.config.js
...
loaders: {
  ...
  {
    test: /\.jade$/,
    loader: 'jade'
  }
}
plugins: [
  new HtmlWebpackPlugin({
    ...
    jade: 'path/to/yourfile.jade'
  })
]

Enfin, des fichiers yourfile.html et bundle.js seront générés dans le dossier build. Revenons maintenant à l'attribut title que nous avons utilisé plus tôt.

Si vous spécifiez à la fois l'option de modèle et l'option de titre, laquelle webpack choisira-t-il ? En fait, le titre du fichier modèle que vous avez spécifié sera sélectionné à ce moment, même si le titre n'est pas défini dans votre fichier modèle.

Qu'en est-il du nom de fichier ? Sera-t-il également écrasé ? En fait, non, le nom de fichier spécifié sera utilisé comme nom de fichier.

injecter

Option d'injection. Il y a quatre options : true, body, head, false

1. true : valeur par défaut, la balise script se situe en bas du corps du fichier html

2. body : Identique à true

3. head : La balise script est située dans la balise head

4. false : Do n'insérez pas le fichier js généré, générez simplement un fichier html

5. favicon : Générez un favicon pour le fichier html généré. La valeur de l'attribut est le chemin d'accès du fichier favicon.

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    favicon: 'path/to/yourfile.ico'
  }) 
]

La balise html générée contiendra une telle balise de lien

<link rel="shortcut icon" href="example.ico" rel="external nofollow" >

Identique au titre et au nom de fichier, si le favicon est spécifié dans le fichier modèle, il ignorera cet attribut.

minify

minify est utilisé pour compresser les fichiers HTML. La valeur de l'attribut minify est une option de compression ou false. La valeur par défaut est false et le fichier html généré ne sera pas compressé. Jetons un coup d'œil à cette option de compression.

html-webpack-plugin intègre html-minifier en interne. Cette option de compression est exactement la même que celle de html-minify

Regardez un exemple simple.

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    minify: {
      removeAttributeQuotes: true // 移除属性的引号
    }
  })
]

<!-- 原html片段 -->
<p id="example" class="example">test minify</p>

<!-- 生成的html片段 -->
<p id=example class=example>test minify</p>

hachage

La fonction de l'option de hachage est de donner au fichier js généré une valeur de hachage unique. La valeur de hachage est. la valeur de hachage compilée par webpack. La valeur par défaut est false . Regardons également un exemple.

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    ...
    hash: true
  })
]

<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

Après avoir exécuté la commande webpack, vous verrez que le fichier js référencé dans la balise script de votre fichier html généré a un peu changé.

La chaîne de valeurs de hachage qui suit le fichier bundle.js est la valeur de hachage correspondant à cette compilation webpack.

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

La valeur par défaut est vraie. Indique qu'un nouveau fichier ne sera généré que lorsque le contenu sera modifié.

showErrors

La fonction de showErrors est que si une erreur se produit lors de la compilation du webpack, webpack encapsulera les informations d'erreur dans une balise pre La valeur par défaut de l'attribut. est vrai, il affiche également simplement un message d'erreur. L'option

chunks

chunks est principalement destinée aux fichiers à entrées multiples. Lorsque vous disposez de plusieurs fichiers d'entrée, plusieurs fichiers js compilés seront générés en conséquence. Ensuite, l'option chunks peut déterminer s'il convient d'utiliser ces fichiers js générés.

les morceaux référenceront par défaut tous les fichiers js dans le fichier html généré. Bien sûr, vous pouvez également spécifier les fichiers spécifiques à importer.

Regardez un petit exemple.

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

Après avoir exécuté la commande webpack, vous verrez que le fichier index.html généré ne fait référence qu'à index.js et index2.js

...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>

Si les morceaux ne sont pas des options spécifiées, tous seront cités par défaut.

excludeChunks

Après avoir compris les morceaux, l'option exclureChunks est facile à comprendre. C'est l'opposé des morceaux et exclut certains fichiers js. Par exemple, l'exemple ci-dessus est en fait équivalent à la ligne suivante :

...
excludeChunks: ['index1.js']

chunksSortMode

Cette option détermine l'ordre de référence des balises de script. Il existe quatre options par défaut : « aucun », « auto », « dépendance », « {fonction} ».

1. 'dependency' Inutile de dire, trier selon les dépendances des différents fichiers.

2. valeur par défaut 'auto', la méthode de tri intégrée du plug-in, je ne suis pas sûr de l'ordre spécifique ici...

3. 'aucun' Trouble ? Pas sûr...

4. {function} Fournit une fonction ? Mais quels sont les paramètres de la fonction ? Je ne suis pas sûr...

S'il y a des étudiants qui ont utilisé cette option ou qui connaissent sa signification spécifique, merci de me le faire savoir. . .

xhtml

Une valeur booléenne, la valeur par défaut est false, si vrai, le fichier est référencé en mode compatible xhtml.

Résumé

Ce qui précède résume les options transmises dans new HtmlWebpackPlugin() Après avoir compris la signification de toutes les options, vous pouvez les utiliser de manière plus flexible lors de la construction du projet. J'espère que cela sera utile à l'apprentissage de chacun, et j'espère également que tout le monde soutiendra Script Home.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Instructions pour utiliser les composants de boutons dans les mini-programmes WeChat

Comment utiliser les composants de progression dans les mini-programmes WeChat

À propos de la façon d'obtenir des données json du serveur dans la méthode $.ajax()

Comment charger des pages Web externes ou des données de serveur à l'aide de Framework MUI

Explication détaillée de Karma+Mocha dans les tests unitaires Vue

Fermetures PHP et fonctions anonymes (tutoriel détaillé)

Comment utiliser le sélecteur de liens à trois niveaux dans le mini-programme WeChat

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!