WebpackパスとpublicPathを使用するメリットとデメリットを詳しく解説-jsチュートリアル-php.cn

WebpackパスとpublicPathを使用するメリットとデメリットを詳しく解説

php中世界最好的语言

リリース： 2018-05-14 13:33:10

オリジナル

1753 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。