公共路径

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

用例

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

基于环境

例如，在开发环境中，我们可能有一个与索引页同级的 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 会是什么，webpack 可以通过从 import.meta.url、document.currentScript、script.src 或 self.location 等变量中确定公共路径来为你自动处理。你需要做的就是将 output.publicPath 设置为 'auto'

webpack.config.js

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

请注意，在不支持 document.currentScript 的情况下，例如 IE 浏览器，你将不得不引入像 currentScript Polyfill 这样的 polyfill。