Webpack パスと publicPath の違いは解析を使用します

今回は、Webpack のパスと publicPath の違いについての分析をお届けします。Webpack のパスと publicPath の違いに関する 注意事項 は何ですか? ここでは実際のケースを見てみましょう。

まえがき

webpack

モジュール化の開発過程で、webpack.config.js設定ファイルの出力パスに必ずパスとpublicPathが入っていて、その意味が分からないことに気づきました。 。

module.exports = {
 output: {
 path: path.resolve("./examples/dist"),
 filename: "app.js",
 publicPath: "What should I put here?" 
 } 
}

テキスト

公式説明

publicPath:

Javascript/HTMLページのビューからのoutput.path。

JS/HTMLページからの出力パス

私の理解

output.path は、すべての出力ファイルが保存されるローカル ファイル ディレクトリです。 (絶対パス)

例:

path.join(dirname, “build/”)

webpack は、すべてのファイルを localdisk/path-to-your-project/build/

output.publicPath に出力します

あなたは、すべてのパッケージ化されたファイルの場所 (相対パス) をアップロードします。サーバーのルートディレクトリ)

path: パッケージ化されたファイルの保存に使用される出力ディレクトリ

publicPath: リソースファイルが参照するディレクトリを指定

用途: たとえば、express では、public/dist がサーバーのルートディレクトリとして指定されますWeb サイトのソース ファイルはパブリックに保存されるため、このディレクトリへのパッケージ出力を指定するにはパス「./dist」を設定する必要があります。また、現在のパスを示すために publicPath を「/」に設定する必要があります。 。パッケージ化されたファイルはすべて Web サイトのルート ディレクトリにあり、これらのファイルへの参照はこのディレクトリに基づいているため、

publicPath は Web サイトのルート ディレクトリの場所に依存します。 Web サイトのルート ディレクトリが public で、参照される画像パスが「./img.png」であると仮定します。publicPath が「/」の場合、画像はパッケージ化されて dist に配置されているため、画像を表示できません。 publicPath を「 /dist」に設定します。

例:

/assets/

このプロジェクトをサーバー http://server/

にデプロイするとします。output.publicPath を /assets/ に設定すると、このプロジェクトは http://server に配置されます。 /assets/ 内のリソース。

この前提の下で、webpack に関連するすべてのパスは /assets/ で始まるように書き換えられます。

src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg"
Accessed by: (http://server/assets/picture.jpg)
src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg"
Accessed by: (http://server/assets/img/picture.jpg)

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS を使用して文字列に含まれるコンテンツを決定する方法の概要

JS+HTML5 マウス イベントのリアル バインディング パーティクル アニメーション

以上がWebpack パスと publicPath の違いは解析を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。