公開路徑

publicPath 組態選項在各種情況下都非常有用。它允許您指定應用程式中所有資產的基礎路徑。

使用案例

在實際應用中，有幾個使用案例讓這個功能變得特別好。基本上，發射到 output.path 目錄的每個檔案都將從 output.publicPath 位置參考。這包括子區塊（透過 程式碼分割 建立）和任何其他資產（例如圖片、字型等），這些資產是依存關係圖的一部分。

基於環境

例如，在開發中，我們可能有一個與索引頁面位於同一層級的 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）中判斷 public path 來自動處理它。你需要將 output.publicPath 設定為 'auto'

webpack.config.js

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

請注意，在不支援 document.currentScript 的情況下，例如 IE 瀏覽器，你必須包含一個 polyfill，例如 currentScript Polyfill。