最近、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のダウンロードとインストールのプロセスの詳細な説明
1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
目次キャンバス関連文書エフェクト画像表示ケースの完全なコード親コンポーネントコードサブコンポーネント...
url-loader をダウンロード 糸を追加 -D URLローダー モジュール: { ルール: {...
1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...
この記事では、JD.comのフラッシュセール効果を実現するためのJavaScriptの具体的なコード...
目次1. ルーティング構成2. Vueページのネスト3. ネストされた関係1. ルーティング構成 定...
目次序文Vue 更新ビューパッチ同じVノードパッチVノード更新子供序文Vue は仮想 DOM を使用...
Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...
ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...
目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...
MySQL は強力なオープンソース データベースです。データベース駆動型アプリケーションの数が増える...
目次1. Dockerをビルドする2. コンテナに入る3. 設定ファイルを変更する4. Kafkaを...
最近、何人かの友人から、仮想マシンに CentOS をインストールした後、ifconfig コマンド...
Docker を使用して、柔軟なオンライン PHP 環境を構築します。場合によっては、他の人がすでに...