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

Question

Что делает 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?"   
  } 
}

310

javascript webpack

Источник

user247243 04 мар '15 в 04:46

9 ответов

Другие вопросы по тегам javascript webpack

user585371 03 авг '16 в 15:57 2016-08-03 15:57 · Answer 1 · 2016-08-03 15:57

Это то, что я нашел, надеюсь, это поможет некоторым из вас. (Пожалуйста, поправьте меня, если что-то не так):

`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" Переписывает ➡ src="/assets/picture.jpg"
Доступ к: (http://server/assets/picture.jpg)
src="/img/picture.jpg" Переписывает ➡ src="/assets/img/picture.jpg"
Доступ к: (http://server/assets/img/picture.jpg)

Важный

Если вы используете style-loader + загрузчики с css sourceMap опция включена, вы должны установить publicPath, Укажите полный абсолютный путь к адресу сервера, например http://server/assets/так что ресурсы будут загружены правильно.

Смотрите: https://github.com/webpack/style-loader/issues/55

user1343851 06 мар '15 в 13:10 2015-03-06 13:10 · Answer 2 · 2015-03-06 13:10

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

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

user1606208 30 авг '15 в 06:50 2015-08-30 06:50 · Answer 3 · 2015-08-30 06:50

~~publicPath просто используется для целей разработки~~ Я был озадачен, когда впервые увидел это свойство конфигурации, но теперь имеет смысл, когда я некоторое время использовал 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

Обновить:

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

оригинал: publicPath используется только для целей разработки, это не только для целей разработки

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

user8919022 14 авг '19 в 12:08 2019-08-14 12:08 · Answer 4 · 2019-08-14 12:08

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

path указывает выходной каталог, в котором 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 указывает виртуальный каталог на веб-сервере, откуда будет обслуживаться связанный файл app.js. Имейте в виду, что сервер слов при использовании publicPath может быть либо webpack-dev-server, либо экспресс-сервером, либо другим сервером, который вы можете использовать с webpack.

например

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

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

publicPath сообщает webpack-dev-server или экспресс-серверу обслуживать этот связанный файл, например, examples / dist / app.js из указанного виртуального местоположения на сервере, то есть / 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

user1991020 04 янв '17 в 23:45 2017-01-04 23:45 · Answer 5 · 2017-01-04 23:45

Вы можете использовать publicPath, чтобы указать место, где вы хотите, чтобы webpack-dev-server обслуживал свои "виртуальные" файлы. Параметр publicPath будет таким же, как и параметр построения контента для webpack-dev-server. webpack-dev-server создает виртуальные файлы, которые он будет использовать при запуске. Эти виртуальные файлы напоминают фактические связанные файлы, которые создает веб-пакет. По сути, вам нужно, чтобы параметр --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-server.

user3190833 14 июн '16 в 08:20 2016-06-14 08:20 · Answer 6 · 2016-06-14 08:20

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

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

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

user12099556 14 июн '21 в 00:42 2021-06-14 00:42 · Answer 7 · 2021-06-14 00:42

Здесь есть много хороших ответов, поэтому я сосредоточусь на output.publicPath: 'auto'.

Скажем, когда вы создаете свой проект, вы получаете следующую структуру папок:

      dist/blog/index.html
dist/app.js
dist/app.css
dist/index.html

В этом случае оба наших файла index.html должны иметь правильный путь к нашим app.js и app.css (далее - assets). Рассмотрим следующие сценарии:

или же :

При размещении на сервере оба указывают на корень веб-сайта (например, https: // localhost: 8080 /), поэтому все работает нормально.

Но если вы попытаетесь открыть их локально, у вас не будет правильного пути к активам. В случае publicPath: '' активы будут найдены в blog/папка, так как на нее указывает относительный путь. по-прежнему имеет правильный путь к активам.

И в случае publicPath: '/', / указывает на корень файловой системы, поэтому ни один из наших файлов index.html не будет иметь правильного пути к ресурсам.
publicPath: 'auto':

В этом случае оба наших файла index.html будут иметь относительные пути к ресурсам. Так, blog/index.html будет указывать на ../app.css, а также index.html будет указывать на app.css.

user2374144 05 май '17 в 19:35 2017-05-05 19:35 · Answer 8 · 2017-05-05 19:35

В документации к webpack2 это объясняется гораздо чище: https://webpack.js.org/guides/public-path/

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

4

Источник

user2374144 05 май '17 в 19:35

user988976 04 янв '17 в 04:33 2017-01-04 04:33 · Answer 9 · 2017-01-04 04:33

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

2

Источник

user988976 04 янв '17 в 04:33