Что делает publicPath в Webpack?

Документы Webpack утверждают, что output.publicPath:

output.path с точки зрения JavaScript.

Не могли бы вы уточнить, что это на самом деле означает?

Я использую output.path и output.filename, чтобы указать, куда Webpack должен выводить результат, но я не уверен, что поместить в output.publicPath и требуется ли он.

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}

Ответ 1

`output.path`

Каталог локального диска для хранения всех ваших выходных файлов (абсолютный путь).

Пример: path.join(__dirname, "build/")

Webpack выведет все в localdisk/path-to-your-project/build/

`output.publicPath`

Где вы загрузили ваши связанные файлы. (относительно корня сервера)

Пример: /assets/

Предполагается, что вы развернули приложение в корневом каталоге сервера http://server/.

Используя /assets/, приложение найдет ресурсы веб-пакета по адресу: http://server/assets/. Под капотом все URL-адреса, с которыми сталкивается веб-пакет, будут переписаны, чтобы начать с "/assets/".

src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg"

Accessed by: (http://server/assets/picture.jpg)

src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg"

Accessed by: (http://server/assets/img/picture.jpg)

Ответ 2

При выполнении в браузере веб-пакет должен знать, где вы будете размещать сгенерированный пакет. Таким образом, он может запрашивать дополнительные куски (при использовании расщепления кода) или ссылки на файлы, загруженные через file-loader или url-loader соответственно.

Например: если вы настроили свой http-сервер для размещения сгенерированного пакета в /assets/, вы должны написать: publicPath: "/assets/"

Ответ 3

~~publicPath используется только для целей~~, я был смущен в первый раз, когда увидел это свойство config, но теперь имеет смысл, что я использовал webpack какое-то время

предположим, что вы поместили весь исходный файл js в папку src, и вы настраиваете свой веб-пакет для создания исходного файла в папку dist с output.path.

Но вы хотите обслуживать свои статические активы в более значимом месте, например webroot/public/assets, на этот раз вы можете использовать out.publicPath='/webroot/public/assets', чтобы в вашем html вы могли ссылаться на js с помощью <script src="/webroot/public/assets/bundle.js"></script>.

когда вы запрашиваете webroot/public/assets/bundle.js, webpack-dev-server найдет js в папке dist

Обновление:

спасибо Чарли Мартину, чтобы исправить мой ответ

original: publicPath используется только для целей dev, это не только для цели

Нет, этот параметр полезен в dev-сервере, но его намерение заключается в асинхронной загрузке пакетов script. Скажем, у вас очень большое одностраничное приложение (например, Facebook). Facebook не хотел бы обслуживать весь свой javascript каждый раз, когда вы загружаете главную страницу, поэтому он обслуживает только то, что нужно на главной странице. Затем, когда вы переходите к своему профилю, он загружает еще один javascript для этой страницы с помощью ajax. Этот параметр указывает, где на вашем сервере загружать этот пакет из

Ответ 4

Вы можете использовать publicPath, чтобы указать, где вы хотите, чтобы webpack-dev-сервер обслуживал свои "виртуальные" файлы. Параметр publicPath будет тем же самым расположением опции content-build для webpack-dev-сервера. webpack-dev-server создает виртуальные файлы, которые будут использоваться при запуске. Эти виртуальные файлы похожи на фактические связанные файлы, создаваемые webpack. В основном вы хотите, чтобы опция -content-base указывала на каталог, в котором находится ваш index.html. Вот пример установки:

//application directory structure
/app/
/build/
/build/index.html
/webpack.config.js


//webpack.config.js
var path = require("path");
module.exports = {
...
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};  


//index.html
<!DOCTYPE>
<html>
...
<script src="assets/bundle.js"></script>
</html>

//starting a webpack-dev-server from the command line
$ webpack-dev-server --content-base build

webpack-dev-server создал папку виртуальных активов вместе с виртуальным файлом bundle.js, на который он ссылается. Вы можете протестировать это, перейдя на localhost: 8080/assets/bundle.js, затем проверьте приложение в этих файлах. Они генерируются только при запуске webpack-dev-сервера.

Ответ 5

в моем случае, У меня есть cdn, и я собираюсь поместить все мои обработанные статические файлы (js, imgs, fonts...) в мой cdn, предположим, что url http://my.cdn.com/

так что если есть файл js, который является исходным адресом ссылки в html, это './js/my.js' он должен был http://my.cdn.com/js/my.js в рабочей среде

в этом случае мне нужно просто установить publicpath равно http://my.cdn.com/ и webpack автоматически добавит этот префикс

Ответ 6

Документация webpack2 объясняет это более чистым способом: https://webpack.js.org/guides/public-path/#use-cases

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

Ответ 7

publicPath используется webpack для замены относительного пути, определенного в вашем css для ссылки на файл изображения и шрифта.

Ответ 8

имя файла указывает имя файла, в который будет собираться весь ваш связанный код после прохождения этапа сборки.

путь указывает выходной каталог output directory, куда будет сохранен файл app.js(имя файла) на диске. Если нет выходного каталога, webpack собирается создать этот каталог для вас. например:

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

Это создаст каталог myproject/examples/dist и в этом каталоге он создаст app.js, /myproject/examples/dist/app.js. После сборки вы можете перейти к myproject/examples/dist/app.js, чтобы увидеть связанный код

publicPath: "Что мне сюда поставить?"

publicPath указывает виртуальный каталог на веб-сервере web server, откуда будет доставлен связанный файл app.js. Имейте в виду, что сервер слов при использовании publicPath может быть либо webpack-dev-server, либо экспресс-сервером, либо другим сервером, который вы можете использовать с webpack.

например

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: path.resolve("/public/assets/js")   
  } 
}

эта конфигурация указывает веб-пакету объединить все ваши файлы js в examples/dist/app.js и записать в этот файл.

publicPath сообщает webpack-dev-server или express server, чтобы он обслуживал этот связанный файл, т.е. examples/dist/app.js из указанного виртуального расположения на сервере server, т.е. /public/assets/JS. Таким образом, в вашем HTML файле вы должны ссылаться на этот файл как

<script src="public/assets/js/app.js"></script>

Итак, в общем, publicPath похож на отображение между virtual directory на вашем сервере и output directory, указанным в конфигурации output.path, всякий раз, когда приходит запрос на файл , public/assets/js/app.js, Файл /examples/dist/app.js будет отправлен