web-dev-qa-db-fra.com

Comment fonctionne html-webpack-plugin avec html-loader?

Je pensais qu'un chargeur n'est invoqué que lorsqu'une ressource est import ed ou require d quelque part et que les ressources correspondent à un tel chargeur.

Mais dans les codes suivants, aucun fichier html n'est importé n'importe où, mais le chargeur html est toujours nécessaire pour faire passer la compilation en raison des trucs de modèle de soulignement dans le html.

J'ai donc les questions suivantes:

  1. Quand le chargeur html arrive-t-il? Après ou avant la génération du bundle?
  2. Pourquoi Webpack appelle-t-il le chargeur HTML? En raison du paramètre de modèle dans le plugin?

  3. Le plugin utilise-t-il la sortie du chargeur? Mais la sortie n'est qu'une chaîne et comment pourrait-elle faire la différence?

    //webpack.config.js
const webpack = require('webpack');
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        a: './a.js'
    },
    output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [
    {
      test: /\.html$/,
      loader: "html-loader"
    }
    ]
},
plugins: [
        new htmlPlugin({
        template:path.resolve(__dirname,'index.html')

    })
]
};  

//index.html
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <script id="item-template" type="text/template">    
        <label><%= title %></label>
      </script>

    </body>
    </html>
webpackhtml-webpack-pluginwebpack-html-loader
12
Shawn Chen

Je vais essayer de vous répondre au mieux:

Il n'y a aucune dépendance de HtmlWebpackPlugin au chargeur html.

  1. Le chargeur html entre en jeu lorsque le webpack détecte les éléments suivants dans votre javascript: require('./app.component.html'), car vous avez le test suivant: /\.html$/. L'action par défaut consiste à placer le code HTML de ce fichier à l'endroit où le besoin est indiqué.

  2. Le html-loader est indépendant de HtmlWebpackPlugin.

  3. Pour autant que je sache, non.

J'espère que vous comprendrez un peu mieux Webpack avec cette réponse.

4
Cees

Comme vous l'avez dit, Webpack ne connaît les fichiers que lorsque vous les importez, sinon il ne le sait pas.

Cependant, Webpack entre d'abord en contact avec votre fichier html via html-webpack-plugin. Vous utilisez probablement html-webpack-plugin Pour des raisons de modèle. Je l'utilise uniquement pour permettre au webpack d'insérer automatiquement le bundle JS et CSS généré dans le html. Les noms de mes fichiers groupés contiennent des "hachages" (par exemple bundle.b88ef660a5aa8442f616.js). Je ne veux pas faire ça à la main.

À ce stade, html-loader N'a rien à voir avec html-webpack-plugin. La raison pour laquelle vous pouvez également utiliser html-loader Est expliquée ci-dessous.

Et si votre modèle contient des images? Ce que certaines personnes font (et ce n'est pas la bonne chose à faire) est d'utiliser copy-webpack-plugin Pour copier le dossier images dans le dossier output/dist et référencer toutes les images dans le html par rapport à ce dossier. C'est faux parce que vos images contournent le webpack et perdent sur les avantages du webpack comme l'ajout de hachage aux noms d'images, l'optimisation des images, le tremblement de l'arborescence, etc. Si vous faites cela, webpack n'a aucune idée de vos images et vous devez prendre soin manuellement de vos images dossier.

La manière "appropriée" consiste à informer Webpack de vos dépendances d'image en "exigeant" les images. Donc, au lieu de <img src="./img/my-image.jpg"> Dans le html, vous devez écrire <img src="${require( ./ img/my-image.jpg )}" />. MAIS changer toutes vos références d'images à la version requise est fastidieux, c'est pourquoi lorsque vous utilisez le html-loader, Il le fera automatiquement pour vous.

Cela peut provoquer une erreur immédiatement. L'erreur sera quelque chose dans le sens de Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Tout ce que cette erreur signifie, c'est que le webpack ne sait pas comment gérer les images. Et pour dire à webpack comment gérer quelque chose qu'il ne connaît pas, vous devez utiliser le chargeur approprié. Dans ce cas, file-loader.

Ci-dessus est l'utilisation la plus courante que j'ai rencontrée en utilisant webpack-html-plugin Et html-loader.

0
user1275105