Публичный путь

Опция конфигурации publicPath может быть очень полезна в различных сценариях. Она позволяет указать базовый путь для всех ресурсов в вашем приложении.

Сценарии применения

Существует несколько сценариев применения в реальных приложениях, где эта функция особенно удобна. По сути, каждый файл, выводимый в ваш output.path каталог, будет ссылаться на output.publicPath расположение. Это включает дочерние фрагменты (созданные с помощью разбиения кода) и любые другие ресурсы (например, изображения, шрифты и т. д.), которые являются частью вашей зависимости.

Зависимость от среды

Например, в разработке у нас может быть папка assets/, которая находится на одном уровне с нашей страницей index. Это нормально, но что, если мы хотим разместить все эти статические ресурсы на 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. Все, что вам нужно, это установить output.publicPath на значение 'auto':

webpack.config.js

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

Обратите внимание, что в случаях, когда document.currentScript не поддерживается, например, в браузере IE, вам потребуется включить полифил, например currentScript Polyfill.