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のダウンロードとインストールのプロセスの詳細な説明

推薦する

Nginx ベースの Mencached キャッシュ構成の詳細な説明

導入Memcached は分散キャッシュ システムです。Memcached には認証とセキュリティ制...

Dockerに関するよくある質問

Docker はポートを IPv6 にのみマッピングし、IPv4 にはマッピングしません。 dock...

Vueでデータ例を定義する方法

序文開発プロセスにおいて、変数の定義は非常に頻繁かつ基本的なタスクです。変数の使用シナリオと範囲に応...

背景画像に CSS3 変換を適用するためのソリューション

CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

MySQLのファジークエリのような遅い速度を解決する方法

質問: インデックスは作成されているのに、Like ファジー クエリがまだ遅いのはなぜですか?インデ...

jsを使用して中国語からピンインへの変換の完全な手順を実行します

jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...

MySQL 5.7 の一時テーブルスペースを使用して落とし穴を回避する方法

導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...

Mysqlツリー再帰クエリの実装方法

序文部門テーブルなどのデータベース内のツリー構造データの場合、部門のすべての従属部門または部門のすべ...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...

サブクエリ最適化における MySQL 選択の実装

以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...

DockerでVueプロジェクトをデプロイする方法を教えます

1.前面に書きます:軽量仮想化テクノロジーとして、Docker には継続的インテグレーション、バージ...

最適なウェブページ幅とその互換性のある実装方法

1. Web ページをデザインするときに、幅を決定するのは非常に面倒な作業です。 jb51.net ...

組み込み Linux 開発環境で ping と nfs を構築するためのソリューション

1. 組み込みソフトウェアレベル 1) ブートローダ -> ブートローダ組み込みシステム全体の...