publicpath webpack что делает
Что делает «publicPath» в Webpack?
С output.path точки зрения JavaScript.
Не могли бы вы уточнить, что это на самом деле означает?
Я использую output.path и, output.filename чтобы указать, где Webpack должен выводить результат, но я не уверен, что вставлять output.publicPath и требуется ли это.
output.path
Пример: path.join(__dirname, «build/»)
Webpack выведет все в localdisk/path-to-your-project/build/
output.publicPath
Где вы загрузили ваши связанные файлы. (Относительно корня сервера)
Пример: /assets/
src=»https://qastack.ru/programming/28846814/picture.jpg» Переписывает ➡ src=»https://qastack.ru/assets/picture.jpg»
Доступ к: ( http://server/assets/picture.jpg )
src=»https://qastack.ru/img/picture.jpg» Переписывает ➡ src=»https://qastack.ru/assets/img/picture.jpg»
Доступ к: ( http://server/assets/img/picture.jpg )
При выполнении в браузере веб-пакет должен знать, где вы будете размещать сгенерированный пакет. Таким образом, он может запрашивать дополнительные порции (при использовании разделения кода ) или ссылочные файлы, загруженные через загрузчик файлов или загрузчик URL-адресов соответственно.
Например: если вы конфигурируете свой http-сервер для размещения сгенерированного пакета под /assets/ вами, вы должны написать: publicPath: «/assets/»
publicPath просто используется для разработки Я был в замешательстве, когда впервые увидел это свойство конфигурации, но теперь имеет смысл, когда я некоторое время использовал webpack
когда вы запрашиваете найдете JS под Dist папки webroot/public/assets/bundle.js webpack-dev-server
Обновить:
спасибо за Чарли Мартина, чтобы исправить мой ответ
оригинал: publicPath используется только для целей разработки, это не только для целей разработки
Нет, эта опция полезна на сервере разработки, но она предназначена для асинхронной загрузки пакетов сценариев в производство. Скажем, у вас очень большое одностраничное приложение (например, Facebook). Facebook не захочет показывать весь свой JavaScript каждый раз, когда вы загружаете домашнюю страницу, поэтому он обслуживает только то, что нужно на домашней странице. Затем, когда вы заходите в свой профиль, он загружает еще несколько javascript для этой страницы с помощью ajax. Эта опция указывает, откуда на вашем сервере загрузить этот пакет
webpack-dev-server создал папку виртуальных ресурсов вместе с виртуальным файлом bundle.js, на который она ссылается. Вы можете проверить это, перейдя в localhost: 8080 / assets / bundle.js, а затем проверьте в вашем приложении наличие этих файлов. Они генерируются только при запуске webpack-dev-server.
поэтому, если есть файл js, который является исходной ссылкой, ссылка в html будет «./js/my.js», он должен стать http://my.cdn.com/js/my.js в производственной среде
в этом случае мне нужно просто установить publicpath равным http://my.cdn.com/ и webpack автоматически добавит этот префикс
filename указывает имя файла, в который будет собираться весь ваш связанный код после прохождения этапа сборки.
путь указывает выходной каталог, в котором app.js (имя файла) будет сохранен на диске. Если нет выходного каталога, webpack собирается создать этот каталог для вас. например:
publicPath: «Что мне сюда поставить?»
Webpack: Что делает «publicPath» в webpack?
Я действительно внимательно и много раз смотрю документы, но не могу понять, что это значит.
Путь output.path из представления страницы Javascript / HTML.
Кто-нибудь может это объяснить? Лучше с образцом, спасибо.
@bebraw
Project Dir выглядит так:
И index.html :
И index.js :
И webpack.config.js :
Затем посетите index.html по http. В bundle.js входит модуль:
Все 13 Комментарий
Предполагая, что вы используете CDN, вы можете указать ему корневой путь CDN. После этого Webpack будет искать ваши активы оттуда.
@jasonleft Я только что сделал быстрый тест. Кажется, это меняет путь к каждому активу. Не могли бы вы установить для меня небольшую демонстрацию? Так проще найти решение.
@bebraw
Project Dir выглядит так:
И index.html :
И index.js :
И webpack.config.js :
Затем посетите index.html по http. В bundle.js входит модуль:
@bebraw
На самом деле я хочу знать сценарий использования этого свойства, мне очень жаль, что я немного знаю о github. Я не опытный пользователь github, потому что много времени трачу на бэкэнд. Спасибо за терпение!
@jasonleft Теперь вам это достаточно ясно? Вы справились со своим вариантом использования?
@jasonleft Я хочу знать, как вы справляетесь со своим делом, когда только некоторые активы в cdn находятся в производстве. Можете ли вы показать свой код.Thx.
What does «publicPath» in Webpack do?
Webpack docs state that output.publicPath is:
The output.path from the view of the JavaScript.
Could you please elaborate on what this actually means?
I use output.path and output.filename to specify where Webpack should output the result, but I’m not sure what to put in output.publicPath and whether it is required.
9 Answers 9
output.path
Local disk directory to store all your output files (Absolute path).
Example: path.join(__dirname, «build/»)
Webpack will output everything into localdisk/path-to-your-project/build/
output.publicPath
Where you uploaded your bundled files. (absolute path, or relative to main HTML file)
Example: /assets/
src=»https://stackoverflow.com/questions/28846814/picture.jpg» Re-writes ➡ src=»https://stackoverflow.com/assets/picture.jpg»
Accessed by: ( http://server/assets/picture.jpg )
src=»https://stackoverflow.com/img/picture.jpg» Re-writes ➡ src=»https://stackoverflow.com/assets/img/picture.jpg»
Accessed by: ( http://server/assets/img/picture.jpg )
When executed in the browser, webpack needs to know where you’ll host the generated bundle. Thus it is able to request additional chunks (when using code splitting) or referenced files loaded via the file-loader or url-loader respectively.
For example: If you configure your http server to host the generated bundle under /assets/ you should write: publicPath: «/assets/»
when you request webroot/public/assets/bundle.js the webpack-dev-server will find the js under the dist folder
Update:
thanks for Charlie Martin to correct my answer
original: the publicPath is just used for dev purpose, this is not just for dev purpose
No, this option is useful in the dev server, but its intention is for asynchronously loading script bundles in production. Say you have a very large single page application (for example Facebook). Facebook wouldn’t want to serve all of its javascript every time you load the homepage, so it serves only whats needed on the homepage. Then, when you go to your profile, it loads some more javascript for that page with ajax. This option tells it where on your server to load that bundle from
filename specifies the name of file into which all your bundled code is going to get accumulated after going through build step.
path specifies the output directory where the app.js(filename) is going to get saved in the disk. If there is no output directory, webpack is going to create that directory for you. for example:
This will create a directory myproject/examples/dist and under that directory it creates app.js, /myproject/examples/dist/app.js. After building, you can browse to myproject/examples/dist/app.js to see the bundled code
publicPath: «What should I put here?»
Что делает publicPath в Webpack?
Документы Webpack утверждают, что output.publicPath :
output.path с точки зрения JavaScript.
Не могли бы вы уточнить, что это на самом деле означает?
ОТВЕТЫ
Ответ 1
output.path
Каталог локального диска для хранения всех ваших выходных файлов (абсолютный путь).
Пример: path.join(__dirname, «build/»)
Webpack выведет все в localdisk/path-to-your-project/build/
output.publicPath
Где вы загрузили ваши связанные файлы. (относительно корня сервера)
Пример: /assets/
src=»https://ask-dev.ru/info/39849/picture.jpg» Re-writes ➡ src=»https://ask-dev.ru/assets/picture.jpg»
Accessed by: ( http://server/assets/picture.jpg )
src=»https://ask-dev.ru/img/picture.jpg» Re-writes ➡ src=»https://ask-dev.ru/assets/img/picture.jpg»
Accessed by: ( http://server/assets/img/picture.jpg )
Ответ 2
При выполнении в браузере веб-пакет должен знать, где вы будете размещать сгенерированный пакет. Таким образом, он может запрашивать дополнительные куски (при использовании расщепления кода) или ссылки на файлы, загруженные через file-loader или url-loader соответственно.
Ответ 3
Обновление:
спасибо Чарли Мартину, чтобы исправить мой ответ
original: publicPath используется только для целей dev, это не только для цели
Нет, этот параметр полезен в dev-сервере, но его намерение заключается в асинхронной загрузке пакетов script. Скажем, у вас очень большое одностраничное приложение (например, Facebook). Facebook не хотел бы обслуживать весь свой javascript каждый раз, когда вы загружаете главную страницу, поэтому он обслуживает только то, что нужно на главной странице. Затем, когда вы переходите к своему профилю, он загружает еще один javascript для этой страницы с помощью ajax. Этот параметр указывает, где на вашем сервере загружать этот пакет из
Ответ 4
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 собирается создать этот каталог для вас. например:
Это создаст каталог myproject/examples/dist и в этом каталоге он создаст app.js, /myproject/examples/dist/app.js. После сборки вы можете перейти к myproject/examples/dist/app.js, чтобы увидеть связанный код
publicPath: «Что мне сюда поставить?»
10 особенностей Webpack
Webpack считается лучшим инструментом для сборки приложений на React и Redux. Полагаю, многие из тех, кто сегодня использует Angular 2 и другие фреймворки, не обходят вниманием и Webpack. И поскольку начинать работу с данным инструментом всегда непросто, я решил посвятить этой теме несколько публикаций в надежде облегчить старт другим разработчикам и заодно продемонстрировать некоторые особенности Webpack.
Когда я впервые увидел его файл конфигурации, он показался мне крайне странным и путанным. Но спустя некоторое время я понял, что всё дело в уникальном синтаксисе Webpack и несколько иной философии, которая может поначалу немного сбить с толку. Но, с другой стороны, именно эта новая философия и делает Webpack таким популярным.
Философия Webpack
Можно выделить 2 основных принципа философии Webpack:
1. Development и production
Прежде всего нужно понять, что Webpack имеет множество функций, часть которых ориентирована на development, другая – на production, а третья – на то и на другое.
Пример Webpack-файлов для development и production
Большинство проектов используют так много функций, что у них, как правило, есть 2 больших файла конфигурации Webpack.
Для создания бандлов вам, скорее всего, потребуется писать скрипты в package.json, примерно так:
2. webpack CLI и webpack-dev-server
Важно отметить что Webpack, как сборщик модулей, предоставляет 2 интерфейса:
Этот инструмент берет опции через инструмент CLI, а также через файл конфигурации (по умолчанию – webpack.config.js) и передает их в Webpack для сборки.
И хотя вы можете начать изучение Webpack, используя CLI-инструмент, он по большей части пригодится вам только для последующей генерации production-сборок.
Webpack-dev-server (подходит для development-сборок)
Это Express Node.js сервер, который работает на порту 8080. Этот сервер вызывает Webpack изнутри, что дает дополнительные возможности вроде перезагрузки браузера (Live Reloading) и/или замены только что измененного модуля (Hot Module Replacement, или HMR).
Webpack и опции инструмента webpack-dev-server
Стоит отметить, что некоторые опции, такие как inline и hot, используются только для инструмента webpack-dev-server, в то время как, скажем, hide-modules подходят только для CLI.
Опции webpack-dev-server CLI и опции config
Стоит также отметить, что существует 2 способа передачи опций в webpack-dev-server:
Я обнаружил, что devServer config (hot:true и inline:true) иногда не работает. Поэтому я предпочитаю передавать опции как CLI-опции внутри package.json, вот так:
Опции hot и inline для webpack-dev-server
Опция inline добавляет Live Reloading для всей страницы. Опция hot включает Hot Module Reloading – горячую перезагрузку модуля, которая перезагружает только измененный компонент (а не всю страницу). Если передать обе опции, то при изменении источника webpack-dev-server запустит прежде всего HMR и, только если это не сработает, перезагрузит всю страницу.
3. entry– строка, массив и объект
Entry передает в Webpack данные о том, где находится корневой модуль или точка входа. Это может быть строка, массив или объект – причем разные типы используются для разных целей.
Если у вас всего одна точка входа (как в большинстве приложений), вы можете выбрать любой формат, и результат будет тот же.
Разные типы entry с одинаковым результатом
Но, если вы хотите добавить несколько файлов, не зависящих друг от друга, можно использовать формат массива.
Например, если вам понадобится googleAnalytics.js в вашем HTML, можно сделать так, чтобы Webpack добавил этот файл в конец bundle.js:
Предположим, у вас настоящее многостраничное приложение, не SPA с мультипросмотром, а несколько HTML-файлов (index.html и profile.html). С помощью Webpack вы можете сразу сгенерировать множество бандлов, используя объект entry.
Файл конфигурации на примере ниже будет генерировать 2 JS-файла: indexEntry.js и profileEntry.js, которые можно использовать в index.html и profile.html соответственно.
Примечание: название файла происходит от ключей объекта entry
Вы также можете использовать entry-массивы внутри entry-объекта. К примеру, следующий файл конфигурации сгенерирует 3 файла: index.js, profile.js и vendor.js, содержащий 3 vendor-файла.
4. output – path и publicPath
output сообщает Webpack, где и как хранить результирующие файлы. У output есть 2 свойства, path и publicPath, поначалу это может немного смутить.
Свойство path сообщает Webpack, где хранить результат, тогда как свойство publicPath используется в нескольких плагинах Webpack для обновления URL внутри CSS- и HTML-файлов во время генерации production-сборок.
Использование свойства publicPath для development и production
Но вместо этого можно применить свойство publicPath, а также целый ряд сопряженных плагинов, чтобы автоматически обновлять все URL при генерации production-сборок.
Пример publicPath production
5. Загрузчики и цепочки загрузчиков
Загрузчики – это дополнительные узловые модули, которые помогают загружать или импортировать файлы разных типов в совместимых с браузерами форматах – JS, CSS и т. д. Последующие загрузчики также позволяют импортировать такие файлы в JS, используя require или import в ES6.
Например, вы можете использовать babel-loader для конвертации JS-файла, написанного на ES6, в совместимый с браузером ES5:
Цепочки загрузчиков (работают справа налево)
Несколько загрузчиков для одного типа файлов можно объединить в цепочку. Формирование цепочек осуществляется справа налево, а загрузчики отделяются восклицательным знаком: «!».
Предположим, у нас есть CSS-файл myCssFile.css, и мы хотим выгрузить его содержимое в тег внутри HTML. Это можно сделать, используя 2 загрузчика: css-loader и style-loader.
Вот как это работает:
6. Настройка загрузчиков
Загрузчики можно настраивать так, чтобы они работали по-разному в зависимости от параметров передачи.
В следующем примере url-loader настроен таким образом, чтобы использовать DataURL для изображений размером менее 1024 байт и URL для изображений размером более 1024 байт. Это можно осуществить, передав параметр limit одним из двух способов:
babel-loader использует настройку presets, чтобы правильно конвертировать ES6 в ES5 и парсить React JSX в JS. Настройки можно передать через параметр query, как показано ниже:
Это должно выглядеть примерно так:
8. Плагины
Плагины – это дополнительные узловые модули, которые работают с результирующим бандлом.
К примеру, uglifyJSPlugin берет bundle.js, а затем минимизирует и обфусцирует его содержимое, чтобы уменьшить размер файла.
Аналогичным образом extract-text-webpack-plugin внутренне использует css-loader и style-loader, чтобы собрать все CSS-файлы в одном месте. Этот плагин извлекает результат во внешний файл styles.css и добавляет ссылку на этот файл в index.html.
Примечание: если вы хотите просто встроить CSS как элемент стиля в HTML, это можно сделать без плагина extract-text-webpack-plugin, а за счет CSS и загрузчиков стилей, как показано ниже:
9. Загрузчики и плагины
Как вы успели заметить, загрузчики работают на отдельном файловом уровне во время генерации бандла или перед ней.
В свою очередь, плагины работают на уровне бандла или фрагмента по окончании генерации бандла. А некоторые плагины вроде commonsChunksPlugins пошли еще дальше и изменили способ создания самих бандлов.