Webpack 公共路徑

publicPath 配置選項在各種場景中都非常有用。你可以通過它來指定應(yīng)用程序中所有資源的基礎(chǔ)路徑。

示例

下面提供一些用于實際應(yīng)用程序的示例，通過這些示例，此功能顯得極其簡單。實質(zhì)上，發(fā)送到 ?output.path? 目錄的每個文件，都將從 output.publicPath 位置引用。這也包括（通過 代碼分離 創(chuàng)建的）子 chunk 和作為依賴圖一部分的所有其他資源（例如 image, font 等）。

基于環(huán)境設(shè)置

在開發(fā)環(huán)境中，我們通常有一個 ?assets/? 文件夾，它與索引頁面位于同一級別。這沒太大問題，但是，如果我們將所有靜態(tài)資源托管至 CDN，然后想在生產(chǎn)環(huán)境中使用呢？

想要解決這個問題，可以直接使用一個有著悠久歷史的 environment variable(環(huán)境變量)。假設(shè)我們有一個變量 ?ASSET_PATH?：

import webpack from 'webpack';

// 嘗試使用環(huán)境變量，否則使用根路徑
const ASSET_PATH = process.env.ASSET_PATH || '/';

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

  plugins: [
    // 這可以幫助我們在代碼中安全地使用環(huán)境變量
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
    }),
  ],
};

在運行時設(shè)置

另一個可能出現(xiàn)的情況是，需要在運行時設(shè)置 publicPath。webpack 暴露了一個名為 __webpack_public_path__ 的全局變量。所以在應(yīng)用程序的 entry point 中，可以直接如下設(shè)置：

__webpack_public_path__ = process.env.ASSET_PATH;

這些內(nèi)容就是你所需要的。由于我們已經(jīng)在配置中使用了 DefinePlugin， process.env.ASSET_PATH 將始終都被定義， 因此我們可以安全地使用。

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

Automatic publicPath $#automaticpublicPath$

有可能你事先不知道 publicPath 是什么，webpack 會自動根據(jù) import.meta.url、document.currentScript、script.src 或者 self.location 變量設(shè)置 publicPath。你需要做的是將 output.publicPath 設(shè)為 'auto'：

webpack.config.js

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

請注意在某些情況下不支持 document.currentScript，例如：IE 瀏覽器，你不得不引入一個 polyfill，例如 currentScript Polyfill。