Webpack での publicPath の使用法の詳細な説明

Webpack での publicPath の使用法の詳細な説明

最近、webpack をベースに react プロジェクトを構築していたのですが、webpack-dev-server の output.publicPath と publicPath で問題が発生しました。公式ドキュメントでは明確に説明されていなかったので、自分で調べて、記録としてこの記事を書きました。

出力

出力オプションは、Webpackの出力先を指定します。より重要で頻繁に使用されるのは、pathとpublicPathです。

出力パス

デフォルト値: process.cwd()
output.path は、絶対パスに対応する出力ディレクトリを示します。たとえば、プロジェクトでは通常、次の構成が行われます。

出力: {
 パス: path.resolve(__dirname, '../dist'),
}

出力.publicPath

デフォルト値: 空の文字列 公式ドキュメントではpublicPathは次のように説明されている。

webpack は、プロジェクト内のすべてのアセットの基本パスを指定するのに役立つ非常に便利な構成を提供します。これは publicPath と呼ばれます。

このパスをどのように適用するかは明確ではありません...

実際、ここで言及されているすべてのリソースの基本パスは、プロジェクト内の css、js、img などのリソースを参照する際の基本パスを指します。この基本パスは、特定のリソースで指定されたパスと組み合わせて使用​​する必要があるため、パッケージ化されたリソースのアクセス パスは次の式で表すことができます。

静的リソースの最終アクセスパス = output.publicPath + リソースローダーまたはプラグイン構成パス

例えば

出力.publicPath = '/dist/'

//画像
オプション:
  名前: 'img/[名前].[拡張子]?[ハッシュ]'
}

// 最終的な画像アクセスパスは output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]' です

//js 出力.ファイル名
出力: {
 ファイル名: '[name].js'
}
// js の最終的なアクセス パスは output.publicPath + '[name].js' = '/dist/[name].js' です

// テキスト抽出 Webpack プラグイン CSS
新しいExtractTextPlugin({
 ファイル名: 'style.[chunkhash].css'
})
// CSS の最終的なアクセス パスは output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css' です。

この最終的な静的リソース アクセス パスは、html-webpack-plugin でパッケージ化した後に取得される HTML で確認できます。したがって、publicPath を相対パスに設定すると、ビルド後の相対パスは index.html に対する相対パスになります。たとえば、publicPath を './dist/' に設定すると、パッケージ化された js の参照パスは ./dist/main.js になります。ただし、ここで問題があります。ローカルでアクセスする場合は相対パスを使用できますが、静的リソースが CDN でホストされている場合、アクセス パスは当然相対パスを使用できません。ただし、publicPath を / に設定すると、パッケージ化後のアクセス パスは localhost:8080/dist/main.js となり、ローカルではアクセスできません。

したがって、オンラインになるときに publicPath を手動で変更する必要がありますが、これはあまり便利ではありませんが、解決方法がわかりません...

一般的に、publicPath は '/' で終わる必要があり、他のローダーまたはプラグインの設定は '/' で始まってはなりません。

webpack-dev-server の publicPath

公式ドキュメントのdevServer.publicPathの紹介を見るにはクリックしてください

開発フェーズでは、devServer を使用して開発用の開発サーバーを起動します。publicPath もここで構成されます。publicPath パスの下にあるパッケージ化されたファイルには、ブラウザーでアクセスできます。静的リソースでは引き続き output.publicPath が使用されます。

webpack-dev-server によってパッケージ化されたコンテンツはメモリ上に保存されます。これらのパッケージ化されたリソースのルート ディレクトリは publicPath です。つまり、ここではパッケージ化されたリソースが保存される場所を設定します。

例えば:

// devServer の publicPath が const publicPath = '/dist/' であると仮定します
// devServer を起動した後、index.html の場所は const htmlPath = `${pablicPath}index.html` です
// パッケージの場所 cosnt mainJsPath = `${pablicPath}main.js`

上記は、http://lcoalhost:8080/dist/main.js から直接アクセスできます。

http://localhost:8080/webpack-dev-server にアクセスすると、devServer 起動後のリソース アクセス パスを取得できます。図に示すように、[静的リソース] をクリックすると、静的リソースのアクセス パスが http://localhost:8080${publicPath}index.html であることがわかります。

html-webpack-プラグイン

このプラグインは、HTMLテンプレートにCSSとJSを追加するために使用されます。ソースコードからわかるように、テンプレートとファイル名はパスによって影響を受けます。

テンプレート

機能: テンプレートファイルのパスを定義するために使用します

ソースコード:

this.options.template = this.getFullTemplatePath(this.options.template、compiler.context);

したがって、テンプレートは、webpack コンテキストで定義されている場合にのみ認識されます。webpack コンテキストのデフォルト値は process.cwd() で、これはノード コマンドが実行されるフォルダーの絶対パスです。

ファイル名

機能: 出力HTMLファイル名、デフォルトはindex.html、サブディレクトリで直接設定可能

ソースコード:

this.options.filename = path.relative(compiler.options.output.path, ファイル名);

したがって、filename のパスは output.path を基準とし、webpack-dev-server では、webpack-dev-server によって設定された publicPath を基準とします。

webpack-dev-server の publicPath が output.publicPath と一致していない場合、html-webpack-plugin を使用すると静的リソースの参照に失敗する可能性があります。これは、静的リソースが devServer の output.publicPath によって参照され続けるため、webpack-dev-server によって提供されるリソース アクセス パスと一致しず、正常にアクセスできないためです。

例外が1つあります。output.publicPathが相対パスの場合、ローカルリソースにアクセスできます。

したがって、一般的には、devServer の publicPath が output.publicPath と一致していることを確認する必要があります。

やっと

webpack のパスについては以上です。webpack のパスについて勉強する過程で、次のようなパスに関する断片的な知識を見つけました。

スラッシュの意味 /

設定では、/ は URL のルート パスを表します (例: http://localhost:8080/dist/js/test.js の http://localhost:8080/)。

devServer.publicPath と devServer.contentBase

  • devServer.contentBase は、サーバーにコンテンツの提供元を指示します。静的ファイルを提供する場合にのみ必要です。
  • devServer.publicPath はバンドルの提供元を決定するために使用され、このオプションが優先されます。

ノード内のパス

  • __dirname: 実行されたjsが配置されているフォルダの絶対パスを常に返します
  • __filename: 常に実行されたjsの絶対パスを返します
  • process.cwd(): ノードコマンドが実行されるフォルダの絶対パスを常に返します。

参照する

Webpack2のパスの詳しい説明

NodeJs のいくつかのファイルパスの簡単な分析

プロジェクト内の相対パスと絶対パスに関する問題

Webpack における publicPath の詳しい使い方については、これで終わりです。Webpack の publicPath に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Webpack パスと publicPath の違いの詳細な説明
  • Webpack における publicPath パス問題の詳細な説明
  • webpack学習チュートリアルにおけるpublicPathパス問題の詳細な説明

<<:  Linuxはiftopを使用してネットワークカードのトラフィックをリアルタイムで監視します

>>:  MySQLのダウンロードとインストールのプロセスの詳細な説明

推薦する

Sitemesh チュートリアル - ページ装飾技術の原理と応用

1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...

ubuntu20.04 LTSにdockerをインストールする方法

ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...

VueはCanvasを使用してランダムなサイズで重なり合わない円を生成します

目次キャンバス関連文書エフェクト画像表示ケースの完全なコード親コンポーネントコードサブコンポーネント...

webpack イメージを base64 に変換する例

url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...

Linux でファイルをあいまい検索するのに適したコマンドは何ですか?

1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...

JD.com フラッシュセール効果を実現する JavaScript

この記事では、JD.comのフラッシュセール効果を実現するためのJavaScriptの具体的なコード...

vue router-view のネストされた表示実装

目次1. ルーティング構成2. Vueページのネスト3. ネストされた関係1. ルーティング構成 定...

Vue diffアルゴリズムの完全な分析

目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...

Vue Elementのテーブルコンポーネントをカプセル化する方法

Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...

Dockerコンテナのネットワークポート設定プロセスの詳細な説明

ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...

Dockerイメージ作成の完全なプロセス

目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...

MySQL のデバッグと最適化に関する 101 のヒントを共有する

MySQL は強力なオープンソース データベースです。データベース駆動型アプリケーションの数が増える...

DockerでKafkaをデプロイする方法

目次1. Dockerをビルドする2. コンテナに入る3. 設定ファイルを変更する4. Kafkaを...

Linux CentOS 6.5 ifconfig が IP を照会できない問題の解決方法

最近、何人かの友人から、仮想マシンに CentOS をインストールした後、ifconfig コマンド...

PHP環境構築におけるDockerの柔軟な実装

Docker を使用して、柔軟なオンライン PHP 環境を構築します。場合によっては、他の人がすでに...