問題タブ [webpack-file-loader]

シンプルなHello Worldタイプの Web アプリケーションがあります。「Hello, World!」というテキストを表示するだけです。背景画像付き。アプリは期待どおりに動作しますが、画像がどのようにバンドルされて提供されるかをよりよく理解したいと思います。

を実行するwebpack-dev-serverと、背景画像pattern.svgが次のように出力されることがわかりe78b561561e0911af1eae4c8c3de25c4.svgます。

にアクセスするhttp://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svgと、画像は期待どおりに表示されます。ただし、フォルダー内の webpack の出力を見ると、次のdist2 つのファイルしか表示されません。

リクエストするとどうなりhttp://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svgますか? 画像は webpack の出力バンドルのどこにあり、サーバーはどのようにしhttp://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svgてこの画像にマップすることを認識していますか? 参考までに、以下の関連ファイルの内容を参照してください。

/app/index.html

/app/index.js

/app/styles/main.css

/webpack.config.js

やあみんな（webpack 2.1.0-beta.22を使用）ので、私の中に次の設定がありますwebpack.base.js：

そしてこれは私のwebpack.dev.js：

これで、scssファイルに次の行があります。background-image: url('/themes/default/client/images/snow-flake.png');

webpack を実行してインスペクターを使用すると、パスは次のように置き換えられます。url(/themes/default/dist/media/snow-flake.0af467e3.png)

file-loaderそのディレクトリに作成/コピーしていないため、存在しない完璧な問題はどれthemes/default/dist/mediaですか?

誰かがこれに出くわしましたか？

最近webpackの使い方を学んでいますが、webpackファイルローダーで混乱しています。私が知っているように、ファイルローダーを使用して画像などのファイルをコピーし、ファイルの名前をカスタマイズまたはエンコードしてパスを返すことができます。しかし、なぜファイルローダーが必要なのかわかりません。返されたパスは何に使用されるのでしょうか? file-loader ができることは手動でも簡単にできると思いますが、間違っていますか? 私はwebpackを初めて使用します。オンラインで検索しましたが、何も見つかりませんでした。どんな助けでも大歓迎です、事前に感謝します!

次のようにReactコードに画像をインポートしようとしています(私はbabelを使用しています):

ブラウザで壊れた画像を調べると、次のように表示されます。

css-modules を追加するまでは機能していました。これは私のwebpack構成がどのように見えるかです:

jQuery ui アセットをフォルダー /dist/ に配置したいのですが、アプリからロードする必要があります。私はこれを私のwebpack構成に持っています：

/distdistディレクトリにある画像ファイルからではなく、ルートディレクトリからアセットをロードしようとします。

名前にdistを追加しようとしました：

画像はロードされていますが、画像ファイルを含むディレクトリ dist/dist があります。追加しようとしまし./たが、画像が読み込まれません。また、設定しようとしましoutputPath=/dist/たが、何も変わりませんでした。

ブートストラップ sass と抽出テキスト プラグインを使用して、コンパイルされた css をファイルに出力しています。style.scss 内にブートストラップをインポートしない場合は完全に機能しますが、ブートストラップ webpack をインポートするとフォント パスを解決できません。/node_modules/bootstrap-sass/ ではなく、src フォルダーでブートストラップ フォントを探します。

モジュールが見つかりません: エラー: 'ファイル' または 'ディレクトリ' を解決できません ../fonts/bootstrap/glyphicons-halflings-regular.svg in /Users/yasinyaqoobi/Sites/dari-dictionary-api/src/assets/sass

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

パッケージ.json

webpack.config.js

テスト目的でカルマでファイルローダーを使用することに惨めに失敗しています。404 エラーが発生し、Chrome でデバッグしようとすると、dev-tools の [ソース] タブにファイルが表示されません。

うまくいきません。

私のwebpack.config.js:

私のkarma.conf.js: