web-dev-qa-db-ja.com

html-webpack-pluginはhtml-loaderとどのように連携しますか?

一部のリソースがimport edまたはrequire dであり、リソースがそのようなローダーと一致する場合にのみローダーが呼び出されると思いました。

ただし、次のコードでは、htmlファイルはどこにもインポートされませんが、htmlにアンダースコアテンプレートが含まれているため、コンパイルパスを作成するにはhtml-loaderが必要です。

だから私は次の質問があります:

  1. HTMLローダーはいつ再生されますか?バンドルが生成される前または後?
  2. なぜwebpackはhtml-loaderを呼び出すのですか?プラグインのテンプレート設定のため?
  3. プラグインはローダーの出力を使用しますか?しかし、出力は単なる文字列であり、どのようにして違いを生むことができますか?

    //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>
    
12
Shawn Chen

私はできる限りあなたの質問に答えようとします:

HtmlWebpackPluginからhtml-loaderへの依存関係はありません。

  1. 次のテストがあるため、webpackがJavaScriptでrequire('./app.component.html')を検出すると、htmlローダーが機能します:/\.html$/。デフォルトのアクションでは、requireが指定されている場所にそのファイルのhtmlを配置します。

  2. HTMLローダーはHtmlWebpackPluginから独立しています。

  3. 私の知る限り、いいえ。

この回答でwebpackについて少し理解していただければ幸いです。

4
Cees

あなたが言ったように、Webpackはファイルを「インポート」しているときのみファイルを認識し、そうでなければそれを知りません。

ただし、Webpackは最初に_html-webpack-plugin_を介してHTMLファイルと接触します。テンプレートの理由から、おそらく_html-webpack-plugin_を使用しています。私はそれを純粋に使用して、webpackが生成されたJSおよびCSSバンドルを自動的にhtmlに挿入できるようにします。バンドルファイル名に「ハッシュ」が含まれています(例:bundle.b88ef660a5aa8442f616.js)。私はこれを手作業でしたくありません。

この時点で、_html-loader_は_html-webpack-plugin_とは関係ありません。 _html-loader_を追加で使用する理由については、以下で説明します。

テンプレートに画像が含まれている場合はどうなりますか?一部の人が行うこと(そしてそれを行うのは間違っていること)は、_copy-webpack-plugin_を使用して画像フォルダーをoutput/distフォルダーにコピーし、そのフォルダーに関連するhtml内の画像を参照することです。画像がwebpackをバイパスし、画像名へのハッシュの追加、画像の最適化、ツリーの揺れなどのwebpackの利点を失うため、これは誤りです。これを行うと、webpackは画像を認識できず、手動で画像の世話をする必要がありますフォルダ。

「適切な」方法は、画像を「要求」することにより、webpackに画像の依存関係を知らせることです。したがって、HTMLの_<img src="./img/my-image.jpg">_の代わりに、_<img src="${require(_./ img/my-image.jpg _)}" />_と記述する必要があります。しかし、すべての画像参照をrequireバージョンに変更するのは面倒なので、_html-loader_を使用すると、自動的に行われます。

これにより、すぐにエラーが発生する可能性があります。エラーはModule parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file typeに沿ったものになります。

そのすべてのエラーは、webpackが画像の処理方法を認識していないことを意味します。そして、Webpackが知らないことを処理する方法を伝えるには、適切なローダーを使用する必要があります。この場合、_file-loader_です。

上記は、私が_webpack-html-plugin_と_html-loader_を使用して遭遇した最も一般的な使用法です。

0
user1275105