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)

重要

style-loaderまたはcssのsourceMapを使用している場合は、publicPathを設定する必要があります。リソースが正しく読み込まれるように、サーバー アドレスの絶対パス (http://server/assets/ など) に設定します。

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

推奨読書:

Vueフォームクラスの親子コンポーネントデータ転送メソッドの概要

angular+routerlinkジャンプメソッドの概要

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