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

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

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

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

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

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

showErrors

chunks

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

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

excludeChunks

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

chunksSortMode

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!