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

250

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?"   
  } 
}

javascript webpack

— Миша Морошко
источник

17

Я хотел бы добавить к этому вопросу: когда бы вы использовали pathи когда вы бы использовали publicPath?

— wmock

1

Ответ здесь: github.com/webpack/docs/wiki/configuration#outputpublicpath

— mqklin

Если поможет: tomasalabes.me/blog/_site/web-development/2016/12/10/…

— talabes

6

Кто-то из их команды разработчиков должен проснуться. Так многие задают этот вопрос

— Рой Намир,

вот документы для webpack2 .

— Элиран Малка

134

`output.path`

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

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

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

`output.publicPath`

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

Пример: /assets/

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

При использовании /assets/, приложение будет найти WebPack активы по адресу: 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)

— Кевин Лоу
источник

65

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

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

— Йоханнес Эвальд
источник

3

Подскажите, пожалуйста, где находится папка ресурсов? Я хотел бы видеть файлы в папке активов. Спасибо.

— Гаути

53

~~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>.

когда вы запрашиваете найдете JS под Dist папкиwebroot/public/assets/bundle.jswebpack-dev-server

Обновить:

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

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

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

— Шон
источник

1

Ответ @ jhnns объясняет не только цели разработчиков, но и то, как это влияет на выходные данные загрузчика.

— Вэнь

это то же самое, не так ли? это свойство сообщает вашему загрузчику и вашему промежуточному программному обеспечению, где искать реальные активы, надеюсь, вы не будете использовать webpackmiddleware или webpack-dev-server в своей производственной среде, поэтому я думаю, что это только для среды

— Шон,

1

Из этого webpack.github.io/docs/configuration.html#output-publicpath кажется, что этот параметр указывает веб-пакету вводить правильный URL-адрес или путь ресурсов в сгенерированных файлах, а не только для промежуточного программного обеспечения. При запуске dev server, я думаю, что промежуточное ПО смотрит на publichPathперехват запросов и возвращает файлы в памяти.

— Вэнь

точно, в вашей производственной среде вы будете использовать webpack -pдля создания своих активов, и ваши ресурсы должны обслуживаться вашим сервером приложений или вашим сервером nginx вместо сервера веб-пакетов или промежуточного программного обеспечения веб-пакетов, так что эта конфигурация больше не полезна в производственной среде, я прав ?

— Шон

7

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

— Чарли Мартин,

19

Вы можете использовать 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.

— Исаак Пак
источник

Такое хорошее объяснение, но тогда, если я перейду к производству или сделаю сборку вручную, /build/bundle.jsмне придется изменить srcв своем index.htmlфайле, верно?

— ArchNoob

Извините за поздний ответ. Вам не нужно менять SRC. Независимо от того, работаете ли вы в процессе разработки или разработки, webpack создаст файл bundle.js в пути вывода. В приведенном выше примере это будет /build/bundle.js.

— Исаак Пак

Спасибо, я спрашиваю про srcстроку в файле index.html. Прямо сейчас он указывает на то, что "assets/bundle.js"если он перейдет в производство, в котором будет находиться комплект, то "build/bundle.js"мне придется изменить это в строке html src на src="build/bundle.js". Или есть более автоматизированный способ?

— ArchNoob

2

Теперь я понимаю ваш вопрос. Да, вам нужно будет изменить src на build / bundle.js для производства. Что касается автоматизированного способа сделать это, я не уверен. Я видел, как другие создавали 2 разных файла webpack.config.js, один для производства и один для разработки. Вероятно, есть способ программно, например, если (ENV === production) сделать это ... но я этого не пробовал.

— Исаак Пак

@ArchNoob Просто один на один с тем, как я сейчас делаю это в производстве. Я не изменил значение src, но вместо этого я изменил значение publicPath с /assets/на /build. Таким образом, мне не нужно менять свой index.html. Я также переместил свой index.html из папки сборки в корень приложения.

— Исаак Пак

15

в моем случае у меня есть 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 автоматически добавит этот префикс

— Кент Вуд
источник

Кажется, он не добавляет префикса в моем случае.

— Парам Сингх

14

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

путь указывает выходной каталог, в котором 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 или express 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 будет обслуживаться.

— Удип Шреста
источник

2

хорошо объяснил!

— Ганеш Пандей

3

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

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

— Алан
источник

2

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

— Халид Азам
источник