最近、webpack をベースに react プロジェクトを構築していたのですが、webpack-dev-server の output.publicPath と publicPath で問題が発生しました。公式ドキュメントでは明確に説明されていなかったので、自分で調べて、記録としてこの記事を書きました。 出力出力オプションは、Webpackの出力先を指定します。より重要で頻繁に使用されるのは、pathとpublicPathです。 出力パスデフォルト値: process.cwd() 出力: { パス: 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
ノード内のパス
参照するWebpack2のパスの詳しい説明 NodeJs のいくつかのファイルパスの簡単な分析 プロジェクト内の相対パスと絶対パスに関する問題 Webpack における publicPath の詳しい使い方については、これで終わりです。Webpack の publicPath に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linuxはiftopを使用してネットワークカードのトラフィックをリアルタイムで監視します
>>: MySQLのダウンロードとインストールのプロセスの詳細な説明
導入Memcached は分散キャッシュ システムです。Memcached には認証とセキュリティ制...
Docker はポートを IPv6 にのみマッピングし、IPv4 にはマッピングしません。 dock...
序文開発プロセスにおいて、変数の定義は非常に頻繁かつ基本的なタスクです。変数の使用シナリオと範囲に応...
CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...
質問: インデックスは作成されているのに、Like ファジー クエリがまだ遅いのはなぜですか?インデ...
jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...
実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...
導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...
序文部門テーブルなどのデータベース内のツリー構造データの場合、部門のすべての従属部門または部門のすべ...
目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...
以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...
1.前面に書きます:軽量仮想化テクノロジーとして、Docker には継続的インテグレーション、バージ...
1. Web ページをデザインするときに、幅を決定するのは非常に面倒な作業です。 jb51.net ...
1. 組み込みソフトウェアレベル 1) ブートローダ -> ブートローダ組み込みシステム全体の...