web-dev-qa-db-ja.com

URLローダーとファイルローダーWebpack

私はURLローダーとファイルローダーの違いを理解しようとしています。 DataURlはどういう意味ですか？

Url-loaderはfile-loaderのように機能しますが、ファイルがバイト制限より小さい場合はDataURLを返すことができます。

javascriptwebpackurlloaderwebpack-file-loader
37
stackjlei

url-loaderは、ファイルをbase64にエンコードし、別のリクエストで個別のファイルとしてロードするのではなく、インラインでそれらを含めます。

Base64でエンコードされたファイルは次のようになります。

data:;base64,aW1wb3J0IFJlYWN0IGZ...

これはバンドルに追加されます。

47
jens

イェンスの回答に追加したかっただけ

file-loader will copyファイルをビルドフォルダーに追加し、それらが含まれている場所へのリンクを挿入します。 url-loaderは、ファイルバイトコンテンツ全体をbase64としてエンコードし、含まれている場所にbase64でエンコードされたコンテンツを挿入します。したがって、個別のファイルはありません。

主に両方とも画像などのメディアアセットに使用されます。主に画像。

ファイルをダウンロードするためのサーバーへのhttp要求が少ないため、この手法によりページの読み込みが速くなる場合があります。

url-loaderのサイズ制限を指定できることも重要です。このサイズを超えるすべてのファイルについて、自動的にfile-loaderにフォールバックします。

{
    test: /\.(png|jpg|gif)$/i,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192 // in bytes
        }
    }]
}
18
Gherman