公共路径 | Public Path

Public Path

webpack 提供一个非常有用的配置，该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)。

用例

实际应用中有几个使用情况下，此功能变得特别整洁。基本上，发送到您output.path目录的每个文件都将从该output.publicPath位置引用。这包括子块（通过代码拆分创建）以及作为依赖关系图一部分的任何其他资产（例如图像，字体等）。

Environment Based

在开发模式中，我们通常有一个 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)
    })
  ]
};

即时设定路径值

另一个可能出现的情况是，我们需要即时设置公共路径。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';