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
Миша Морошко
источник
источник
path
и когда вы бы использовалиpublicPath
?Ответы:
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/
".источник
При выполнении в браузере веб-пакет должен знать, где вы будете размещать сгенерированный пакет. Таким образом, он может запрашивать дополнительные порции (при использовании разделения кода ) или ссылочные файлы, загруженные через загрузчик файлов или загрузчик URL-адресов соответственно.
Например: если вы конфигурируете свой http-сервер для размещения сгенерированного пакета под
/assets/
вами, вы должны написать:publicPath: "/assets/"
источник
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.js
webpack-dev-server
Обновить:
спасибо за Чарли Мартина, чтобы исправить мой ответ
оригинал: publicPath используется только для целей разработки, это не только для целей разработки
источник
publichPath
перехват запросов и возвращает файлы в памяти.webpack -p
для создания своих активов, и ваши ресурсы должны обслуживаться вашим сервером приложений или вашим сервером nginx вместо сервера веб-пакетов или промежуточного программного обеспечения веб-пакетов, так что эта конфигурация больше не полезна в производственной среде, я прав ?Вы можете использовать publicPath, чтобы указать место, где вы хотите, чтобы webpack-dev-server обслуживал свои «виртуальные» файлы. Параметр publicPath будет таким же, как и параметр построения контента для webpack-dev-server. webpack-dev-server создает виртуальные файлы, которые он будет использовать при запуске. Эти виртуальные файлы напоминают фактические связанные файлы, которые создает веб-пакет. По сути, вам нужно, чтобы параметр --content-base указывал на каталог, в котором находится ваш index.html. Вот пример установки:
webpack-dev-server создал папку виртуальных ресурсов вместе с виртуальным файлом bundle.js, на который она ссылается. Вы можете проверить это, перейдя в localhost: 8080 / assets / bundle.js, а затем проверьте в вашем приложении наличие этих файлов. Они генерируются только при запуске webpack-dev-server.
источник
/build/bundle.js
мне придется изменитьsrc
в своемindex.html
файле, верно?src
строку в файле index.html. Прямо сейчас он указывает на то, что"assets/bundle.js"
если он перейдет в производство, в котором будет находиться комплект, то"build/bundle.js"
мне придется изменить это в строке html src наsrc="build/bundle.js"
. Или есть более автоматизированный способ?/assets/
на/build
. Таким образом, мне не нужно менять свой index.html. Я также переместил свой index.html из папки сборки в корень приложения.в моем случае у меня есть 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 автоматически добавит этот префикс
источник
filename указывает имя файла, в который будет собираться весь ваш связанный код после прохождения этапа сборки.
путь указывает выходной каталог, в котором app.js (имя файла) будет сохранен на диске. Если нет выходного каталога, webpack собирается создать этот каталог для вас. например:
Это создаст каталог myproject / examples / dist и в этом каталоге он создаст app.js , /myproject/examples/dist/app.js . После сборки вы можете перейти к myproject / examples / dist / app.js, чтобы увидеть связанный код
publicPath: «Что мне сюда поставить?»
publicPath указывает виртуальный каталог на веб-сервере откуда будет доставлен связанный файл app.js. Имейте в виду, что текстовым сервером при использовании publicPath может быть либо webpack-dev-server, либо экспресс-сервер, либо другой сервер, который вы можете использовать с webpack.
например
эта конфигурация говорит webpack упаковать все ваши js-файлы в examples / dist / app.js и записать в этот файл.
publicPath сообщает webpack-dev-server или express server, чтобы он обслуживал этот связанный файл, например examples / dist / app.js, из указанного виртуального расположения на сервере, т.е. / public / assets / js. Таким образом, в вашем HTML-файле, вы должны ссылаться на этот файл как
Итак, в общем, publicPath похож на отображение
virtual directory
на вашем сервере иoutput directory
определяется конфигурацией output.path. Когда приходит запрос на файл public / assets / js / app.js , файл /examples/dist/app.js будет обслуживаться.источник
Документация webpack2 объясняет это гораздо более понятным способом: https://webpack.js.org/guides/public-path/#use-cases
источник
publicPath используется веб-пакетом для замены относительного пути, определенного в вашем CSS, для обновления изображения и файла шрифта.
источник