問題タブ [webpack-file-loader]

ローカルの問題かもしれないので、お手数をおかけして申し訳ありません。しかし、それは何日も私を悩ませてきました。

これが私のwebpack構成です：

そして私のmain.js：

すべて問題ありませんが、Chrome のコンソールを確認すると、次のように表示されます。

これについて私を助けてもらえますか？本当にありがとう。

Webpack で Angular を使用しています (file-loader、url-loader などのローダーを使用)。

ここで、http を介して提供されている画像を読み込みたいと思います。

require('./imgs/profile.png')を使用したとき、ビルドは成功しました

しかし、たとえばrequire(' http://myserver.com/images/profile.png ')と言おうとすると、ビルドに失敗しました。

さて、問題は、私のイメージがローカル環境になく、AWS S3 などのサードパーティ サーバーにあることです。

これを達成する方法は？以下は私のwebpack.config.jsです

サーバー用とクライアント用の 2 つの webpack 構成を持つユニバーサル JavaScript アプリがあります。両方の構成で、ファイルローダーを使用して静的ファイル (フォント、画像など) を要求し、それらのアセットの URL を取得しています。

両方の構成で、publicPath /static/. クライアント側のビルドでは、アセットの URL は正しくプレフィックスが付けられていますが、サーバー側のビルドではそうではありません。

サーバー側の設定は次のとおりです。

output.publicPath必要な呼び出しで構成オプションが使用されていない理由を誰でも見ることができますか?

webpackに問題がありました。私の設定はこちら – https://gist.github.com/lavezzi1/801d5d3f2d2f5dfebb8efd234cedb9ab

のようなものを書くと <img src="./static/logo.png" alt="logo" class="logo">

私のhtmlファイルでは、画像が提供されません。つまり、開発モードでは表示されません。

このコマンドは serve に使用します"dev": "webpack-dev-server --inline --hot"。しかし、vueファイル内に同じコードを書くと、正しくサーバーされます。製品用にビルドするときにも完全に機能します。

どうしたの？開発モードで画像を提供する方法は? ありがとう。

Angular2 アプリケーションでは、次のように webpack 構成でファイル ローダーをセットアップしています。

私はこれを設定の他の場所にも持っています：

私が理解しているように、ファイル ローダーは指定された式 (この場合はフォント ファイル) に一致するファイルを node_modules フォルダーで検索し、それらを/assets/fontsビルド出力のフォルダーにコピーします。ただし、ファイルが実際に宛先フォルダーにコピーされないため、これは機能します。私は何が欠けていますか？

node_modules余談ですが、同じ名前の複数のパッケージにファイルが存在する可能性があるため、競合がどのように処理されるかについても知りたいです。

詳細情報: vendor.scssファイルには以下が含まれます: $zmdi-font-path: "assets/fonts"; @import "~material-design-iconic-font/scss/material-design-iconic-font.scss";

sass-loader は最終的にこれを適用して、次の css を生成します。

上記の 2 つの手順により、ブラウザから のフォント ファイルへのリクエストが発生しますassets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0。これは明らかに実行時まで発生しません。requireビルド時にアセット/フォントにコピーされるようにするには、ファイルをどこに置きますか?

パイプラインでも使用していsass-loaderます: { test: /.scss$/, loaders: ['raw-loader', 'sass-loader'] }

次のように私のコンポーネントにsassを含めます：

ブラウザから見ると CSS が HTML に含まれていることがわかりますが、フォントを呼び出すと 404 が返されます。

src フォルダーにいくつかの画像があります。

index.html ファイルでは、次のように指定します

一部のhtmlファイルでは、次のように指定します

webpack経由で画像、フォントを読み込もうとしています。以下は私のwebpack.configです

画像/フォントを webpack 出力フォルダーにロードしようとしています。エラーは発生しません。正常にビルドされましたが、私の webpack 出力フォルダーのフォントであるビルドでは正常に読み込まれますが、画像が読み込まれません

起動するとwebpack、ファイルがコンパイルされ、scss小さなファイルが に変換されbase64ます。/imgただし、大きな画像も自分のフォルダーから出力フォルダーにコピーします。これを防ぐにはどうすればよいwebpackですか？元の画像への参照を画像フォルダーにwebpack残し、それらを出力フォルダーにコピーしないようにします。

webpack次のようなファイルを作成します (出力フォルダー内):

これが私のwebpack構成ファイルです：