パブリックパス

publicPath 設定オプションは、さまざまなシナリオで非常に役立ちます。これにより、アプリケーション内のすべてのアセットのベースパスを指定できます。

ユースケース

実際のアプリケーションで、この機能が特に便利になるユースケースがいくつかあります。基本的に、output.path ディレクトリに出力されるすべてのファイルは、output.publicPath の場所から参照されます。これには、子チャンク（コード分割を介して作成）や、依存関係グラフの一部である他のアセット（画像、フォントなど）が含まれます。

環境ベース

たとえば開発では、indexページと同じレベルに assets/ フォルダーがある場合があります。これは問題ありませんが、これらの静的アセットをすべて本番環境のCDNでホストしたい場合はどうすればよいでしょうか？

この問題に対処するには、昔ながらの環境変数を簡単に使用できます。変数 ASSET_PATH があるとしましょう。

import webpack from 'webpack';

// Try the environment variable, otherwise use root
const ASSET_PATH = process.env.ASSET_PATH || '/';

export default {
  output: {
    publicPath: ASSET_PATH,
  },

  plugins: [
    // This makes it possible for us to safely use env vars on our code
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
    }),
  ],
};

オンザフライ

別の可能なユースケースは、publicPath をオンザフライで設定することです。Webpackは、それを行うことができる __webpack_public_path__ というグローバル変数を公開しています。アプリケーションのエントリポイントで、これを実行できます。

__webpack_public_path__ = process.env.ASSET_PATH;

必要なのはそれだけです。すでに構成で DefinePlugin を使用しているので、process.env.ASSET_PATH は常に定義されているため、安全に実行できます。

// entry.js
import './public-path';
import './app';

自動 publicPath

publicPath が事前にわからない場合があるかもしれません。webpack は、import.meta.url、document.currentScript、script.src、または self.location などの変数から publicPath を決定することで、自動的に処理できます。必要なのは、output.publicPath を 'auto' に設定することだけです。

webpack.config.js

module.exports = {
  output: {
    publicPath: 'auto',
  },
};

document.currentScript がサポートされていない場合（例：IEブラウザ）、currentScript Polyfill のようなポリフィルを含める必要があることに注意してください。