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 をよろしくお願いいたします。