フロントエンド

webpackのpath、publicPath、contentBaseの違い



Distinction Between Path



output.publicPath＆devServer.publicPath

  • 出力内のpublicPathは、パッケージによって生成されたindex.htmlファイル内の参照されたリソースのプレフィックスを示します
  • devServerのpublicPathは、パッケージによって生成された静的ファイルの場所を示します（devServerのpublicPathが設定されていない場合、出力で設定されたpublicPathの値と見なされます）

2つのpublicPathは、生成されたディレクトリdistに対してdevServerによって設定された仮想ディレクトリと見なすことができます。 devServerは、最初にdevServer.publicPathから値を取得します。設定されていない場合、output.publicPathの値が仮想ディレクトリとして使用されます。設定されていない場合は、デフォルト値「/」を使用してください。

Output.publicPathは、仮想ディレクトリの値だけでなく、html-webpack-pluginプラグインによって生成されたindex.htmlで参照されるjs、css、imgおよびその他のリソースの参照パスにも影響を与える可能性があります。 output.publicPathは、リソースパスに自動的に追加されます。



例

基本ディレクトリ

画像

構成

var path = require('path') var HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: { app: './src/app.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js', libraryTarget: 'umd', publicPath: '/asset/' }, resolve: { extensions: ['.js', '.vue', '.json'] }, externals: { tools: 'tools' }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader', } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'hello world', template: './src/index.html', filename: 'index.html' }) ], devServer: { host: 'test.m.iqiyi.com', port: '9393' } }

訪問することによって http://test.m.iqiyi.com:9393/、 ページにアクセスできず、ディレクトリを表示しただけであることがわかりました
画像



http://test.m.iqiyi.com:9393/にアクセスすると、通常どおりページにアクセスできます。
画像

上記の2つの図を比較すると、output.publicPathがdevServerの仮想ディレクトリの設定に影響を与えると結論付けることができます。同時に、内部で参照されるjsパスもoutput.publicPathに変更されます

構成を変更する場合：



devServer { publicPath: 'test' }

アクセス http://test.m.iqiyi.com:9393/test/、 以下に示すように：
画像

仮想ディレクトリが最初にdevServerのpublicPathを取得し、index.htmlのjsパスが引き続きoutput.publicPathを取得することがわかりますが、2つの値が異なるため、サーバーは/ assets /の仮想ディレクトリを見つけることができません。 。

contentBase

devServerのcontentBaseは、サーバーがコンテンツを提供するように指示された場所を表します。 （つまり、サーバー起動のルートディレクトリ。デフォルトは現在の実行ディレクトリであり、通常は設定する必要はありません）

道

出力内のパスは、出力ディレクトリに対応する絶対パスを示します。

html-webpack-plugin

このプラグインは、cssとjsをhtmlテンプレートに追加するために使用されます。ここで、テンプレートとファイル名は、ソースコードからわかるように、パスの影響を受けます。
テンプレートロール：テンプレートファイルのパスを定義するために使用されます
ソースコード：

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context)

したがって、コピーコードは、webpackコンテキストの定義によってのみ認識されます。 webpackコンテキストのデフォルト値はprocess.cwd（）です。これは、nodeコマンドが実行されるフォルダーの絶対パスです。

ファイル名：出力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と矛盾する場合、静的リソースはdevServerのoutput.publicPathおよびwebpack-dev-で引き続き参照されるため、html-webpack-pluginを使用すると静的リソースへの参照が失敗する可能性があります。サーバーが提供されます。リソースアクセスパスに一貫性がなく、正常にアクセスできません。

あるケースでは、output.publicPathは相対パスであり、この時点でローカルリソースにアクセスできます。

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

参考記事：
https://juejin.im/post/5bb085dd6fb9a05cd24da5cf
https://juejin.im/post/5ae9ae5e518825672f19b094