Public Path

publicPath 配置选项在许多场景下都非常有用。它允许你为应用中的所有资源指定基础路径。

使用场景

在实际应用中，这个功能在几个场景下会特别有用。本质上，所有输出到 output.path 目录的文件都会从 output.publicPath 位置引用，包括（通过代码分离创建的）子 chunk，以及依赖图中包含的任何其他资源（例如图片、字体等）。

基于环境

例如在开发环境中，我们可能会有一个与 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 将始终被定义，因此我们可以安全地这样做。

注意：如果你在入口文件中使用了 ES6 模块导入，__webpack_public_path__ 的赋值将在导入之后执行。在这种情况下，你需要将 public path 的赋值放到一个独立的模块中，然后在 entry.js 的最顶部导入它：

// 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

export default {
  output: {
    publicPath: "auto",
  },
};

请注意，在不支持 document.currentScript 的环境中（例如 IE 浏览器），你需要引入一个 polyfill，例如 currentScript Polyfill。