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>
webpackhtml-webpack-pluginwebpack-html-loader
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