問題タブ [webpack-file-loader]

私は、htmlファイルをプレーンな HTML ファイルとして抽出する必要がある角度アプリケーションに取り組んでおり、同時に<img src="...">それらの画像を (アセットとして) 必要とするかどうかを確認する必要があります。さらに、イメージはルート パス (したがって) に基づいているため、webpack設定 (ベース パス)/images/something.pngに対して相対的に解決する必要があります。context

どうすればこれを達成できますか? html-loader を file-loader とうまく連携させることができません。前者は (ステートメントを含む) JS ファイルを出力しrequire、後者はプレーンな HTML ファイルを想定しているためです。

次の webpack スクリプトがあります。

私のファイルはバンドルされ、ビルドディレクトリに出力され、すべて正常に動作します。ただし、フォントローダーを追加しました。私のアプリ ディレクトリ内には、次のフォルダー内にフォント ファイルがあります: app/assets/fonts(現在は TTF のみですが、これは変更される予定です)。

上記のフォント スクリプトはまったく何もしません。デフォルトのスクリプトを両方とも実行します。

public ディレクトリには何も置かれません。これは別に設定しなければならないものですか？フォント ファイルを含む public フォルダー内に (app/ 内の) 同一のディレクトリを作成するようにローダーに指示するにはどうすればよいですか?

Webpack を からディレクトリにファイルをトランスパイルしようとしていますpublic/imagesがapp/assets/images、何らかの理由で機能していません。フォント ファイルに同じスクリプトを使用しましたが、すべて正常に動作しています。

働く

しかし、何らかの理由で、ファイルがテストでイメージ ファイルに変更された瞬間、何も起こりません。

機能しない

画像に何か欠けていますか？

私は webpack を使用して、いくつかの反応コンポーネントをホストする npm パッケージ用の適切なファイルを生成しています。それらには、いくつかのフォントとアイコンを参照するいくつかの CSS が添付されています。

ローダーを使用する場合file、これらのアセットは、fonts/my-font.woff欠落しているメイン アプリの絶対パス (つまり ) を使用して誤って参照されます。

これを修正して、メイン アプリに適切なファイルを検索させる方法はありますか? メインアプリを完全に制御できない可能性があるため、誰かが言及したようにアセットをコピーするなどのことを行うよりも、パッケージ自体を修正したいと思います。

Windows 10. https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacementの React + Webpack チュートリアルに従っていますが、インデックスをコピーする必要があるポイントで立ち往生していますapp/ フォルダーから dist/ フォルダーへの .html。/dist フォルダーに直接コピーする代わりに、index.html が dist/app/ フォルダーにコピーされます。助けていただけますか？

これが私のwebpack.config.jsファイルです

フォルダ構造

前もって感謝します！

現在、Webpack を使用して Angular2 アプリケーションをパックしていますが、問題に直面しています。

いくつかのドキュメントを読みましたが、ファイル ローダーを使用して出力ディレクトリにいくつかのファイルをコピーする方法がわかりません。

これが私の現在のファイル階層です：

および (完全な) webpack.common.js :

webpack を実行するには、次のコマンドを実行します。

ts ファイルは正しく javascript にトランスピルされ、出力ディレクトリにコピーされます。index.html ファイルも存在しますが、画像ファイルはありません。

構成ファイルに何か問題があると思いますが、何がわかりません。私は何時間も頭を悩ませているので、どんな助けも大歓迎です。

ありがとうございました

次のように、フォント、画像、cssのローダーモジュールを含む典型的なWebpackファイルがあります。

作業コード:

動作していません:

私のルートフォルダーには、次のディレクトリが含まれています。

イメージ ローダーとスタイル ローダーの両方が問題なく動作していますが、何らかの理由でフォント ファイルが public/fonts ディレクトリにトランスパイルされません。

image私のフォルダやフォルダと同じようにstyle、フォント ディレクトリはアプリのルート内にあります。内部には./fonts、フォントの内容を含む 2 つのフォルダーがあり./fonts/robotoます./fontawesome。これらのディレクトリは内部を反映する必要があります./public/が、今のところ、フォントを./publicディレクトリにコピーすることさえできないため、./public/fonts/roboto. 何も起こりません。警告/エラーはありません。私が何か間違ったことをしているかどうかはどうすればわかりますか?

新しいウェブパック

public/ ディレクトリにレンダリングまたはコピーされるものはありません。エラーなし。

Webpackを使用して、プリロードされた一連のストック画像をWebアプリにバンドルするプロジェクトに取り組んでいます。約400枚の画像があり、半分はサムネイルです。400 のrequireステートメントを記述する代わりに、新しいコンテキストを作成して繰り返しロードします。

webpack.config.js

main.js

すべてのストック イメージは/images/stockディレクトリ内に存在し、に提供され/imgます。問題は、webpack が静的アセットのバンドルを完了すると、ディレクトリ内の画像の半分強しか提供されないことです (console.logループ内では約 230 のファイル名しか出力されません)。ブラウザ内で画像にアクセスすると、バンドルにリストされていないものは 404 です。ログにエラーがスローされていないため、require は適切な場所にあるすべての画像を見つけているようです。

一部の画像が正常に読み込まれるのに、他の画像が読み込まれない理由を知っている人はいますか? すべてがjpgs で、問題の最大のものは約 5MB、ほとんどは約 1MB (バンドルの場合は合計約 300MB) であり、作成方法に違いはありません (すべて同じデザイナーによるものです)。

React アプリに Webpack を使用しています。

Webpack構成に「File-loader」と「Url-loader」をインストールしました。

ただし、画像をコンポーネントにリンクする方法がわかりません。画像の「src」を「Data.js」ファイルに保持しており、そこから画像のデータを反応コンポーネントに渡します。

私のwebpack.config.js:

私の反応プレゼンテーションコンポーネントであるImは、単にrequire画像を取得するために使用しています:

Data.js ファイルには、各画像の絶対パス (メイン アプリ フォルダー) があります (ここで間違っている可能性があります)。

その価値のためのグローバル ディレクトリ イメージ:

どこで間違いを犯しているのか、どうすれば解決できるのだろうか?

編集: 読んだ後、webpack には画像の相対位置の参照が必要であることがわかりました。そのため、webpack.config.js を次のように修正しました。

ただし、それでは問題は解決しません。ガイダンスをいただければ幸いです。