webpackのローダーを使用すると、ビルドファイルにどのような影響がありますか？

Question

従来のWebアプリケーション（MVCタイプ）を作成すると、アセットはパブリックフォルダから配信されますが（通常は）、Reactにはパブリックフォルダがありません（create-react-appを使用）ローダーを使用してください。

Webpackがビルドを行った後にReactのために生成するバンドルファイルの一部として、ロードされたファイルが含まれていますか？イメージローダーを使用するのではなく、スタティックアセット用にCDNを使用すると、自分のビルドのサイズが増えるため、これが最適です。

または、create-react-appの使用時に静的資産を処理する際のベストプラクティスは何ですか？

入力いただきありがとうございます！ちょうどあなたがcreate-react-appを使用している、そして、あなたのJSファイルに画像をインポートする場合、これらの画像は、直接あなたのイメージを埋め込むのいずれかurl-loader WebPACKのモジュール（そのgithubのにlink）を、使用してロードされます...よりよく理解するために

Answer 1

をしようDataURL（詳細はhere）を使用してHTMLに挿入するか、画像が10,000バイトを超える場合は、別のファイルに保存されます。

関連するコードはwebpack.config.prod.jsである：上記の構成単位

{ 
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 
    loader: require.resolve('url-loader'), 
    options: { 
     limit: 10000, 
     name: 'static/media/[name].[hash:8].[ext]', 
    }, 
}, 

、大きな画像（10,000バイトを超える）をstatic/mediaフォルダに配置されます。あなたは以下のようなあなたのJSファイルにあなたのイメージをインポートする場合

これが動作です：

import img from './file.png' 

あなたがあなたのイメージをインポートしていない場合、それはあなたのイメージ整理方法を選択するのはあなた次第完全です。たとえば、あなたがあなたのルートディレクトリに/static/imagesフォルダに画像を配置し、そのようなそれらの画像を参照することができます：

<img src="/static/images/logo.png" /> 

のベストプラクティスの観点では、引数のいずれかの方法で行うことができます。 url-loaderを使用することの重要な利点の1つは、HTMLに埋め込まれる画像が小さくなるため、パフォーマンスに役立つはずです。一方、CDNからイメージを提供することは、アプリケーションのサーバーよりも速く大きなイメージを提供する可能性があります。