画像パスが原因で発生する Webpack パッケージ化エラーに対処する方法

今回は、imagesパスが原因で発生するwebpackのパッケージングエラーに対処する方法について説明します。webpackのパッケージ化エラーにつながる画像パスに対処するときの注意事項は何ですか?実際のケースを見てみましょう。

私は最近、自分の個人的なブログを作成していたときに、以下に示すように CSS で相対パスを背景画像として使用したときにこのような問題に遭遇しました。

次に、プロジェクト全体を webpack でパッケージ化した後、参照します。サーバー上で実行すると、次のようなエラーが報告されます:

つまり、パッケージ化後にイメージファイルが見つからないのですが、まず、私の構成を見てみましょう。 webpack.config.js ファイル内:

実際、ここでは間違ったローダーを使用していません。次に、webpack を使用してパッケージ化した後のディレクトリを見てみましょう。

dist フォルダー内にパッケージ化して生成したいファイル build.js が表示され、追加の画像ファイルが生成されます。このファイルは、CSS で指定した背景画像です。エラー メッセージ、ビルド .js で指定されたイメージのアドレスは明らかに間違っています。デフォルトでは、パッケージ化プロセスは使用されるイメージをコピーし、出力のパスで指定されたディレクトリに配置します。 build.js で引用されています

の画像パスは確かにプロジェクト ファイル全体のルート ディレクトリなので、自然参照

は使用されません。では、出力

で publicPath

属性

を指定する必要があります。 webpack.config.js ファイル内のオブジェクト

は、静的 リソース (写真など) のリリース アドレスを指定するために使用されます。この属性が設定されている場合、すべてのリソースはパッケージ ファイル内の相対パスによって参照されます。 、build.js) は、設定されたパスに置き換えられます。そこで、このように設定した後

、build.js内の画像を参照するパスは、初期ルートディレクトリのパスの後にpublicPathで指定したパスが追加されるので、webpack.configに以下の図の

を追加します。 .js ボックス内の内容で十分です:

そして、最終的には、実行後に dist フォルダーから生成されたイメージを見つけることができます

のケースを読んだ後、この方法を習得したと思います。この記事については、オンラインの php 中国語のその他の関連記事に注目してください。 推奨読書:

webpack がファイルを動的にインポートする方法

指定された JS ファイルを webpack でパッケージ化するには何をする必要があるか

以上が画像パスが原因で発生する Webpack パッケージ化エラーに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。