publicpath webpack что делает
Что делает publicPath в Webpack?
Документы Webpack утверждают, что output.publicPath является:
output.path с точки зрения JavaScript.
Не могли бы вы уточнить, что это на самом деле означает?
я использую output.path а также output.filename указать, где Webpack должен выводить результат, но я не уверен, что положить в output.publicPath и требуется ли это.
9 ответов
Это то, что я нашел, надеюсь, это поможет некоторым из вас. (Пожалуйста, поправьте меня, если что-то не так):
output.path
Каталог локального диска для хранения всех ваших выходных файлов (абсолютный путь).
Пример: path.join(__dirname, «build/»)
Webpack выведет все в localdisk/path-to-your-project/build/
output.publicPath
Где вы загрузили свои файлы в комплекте. (Относительно корня сервера)
Пример: /assets/
src=»https://stackru.com/questions/18964404/picture.jpg» Переписывает ➡ src=»https://stackru.com/assets/picture.jpg»
Доступ к: ( http://server/assets/picture.jpg )
src=»https://stackru.com/img/picture.jpg» Переписывает ➡ src=»https://stackru.com/assets/img/picture.jpg»
Доступ к: ( http://server/assets/img/picture.jpg )
Важный
При выполнении в браузере веб-пакет должен знать, где вы будете размещать сгенерированный пакет. Таким образом, он может запрашивать дополнительные фрагменты (при использовании разделения кода) или ссылочные файлы, загруженные через загрузчик файлов или загрузчик URL-адресов соответственно.
Например: если вы настраиваете свой http-сервер для размещения сгенерированного пакета в /assets/ Вы должны написать: publicPath: «/assets/»
publicPath просто используется для целей разработки Я был озадачен, когда впервые увидел это свойство конфигурации, но теперь имеет смысл, когда я некоторое время использовал webpack
когда вы запрашиваете webroot/public/assets/bundle.js webpack-dev-server найдет js в папке dist
Обновить:
спасибо за Чарли Мартина, чтобы исправить мой ответ
оригинал: publicPath используется только для целей разработки, это не только для целей разработки
Нет, эта опция полезна на сервере разработки, но она предназначена для асинхронной загрузки пакетов сценариев в производство. Скажем, у вас очень большое одностраничное приложение (например, Facebook). Facebook не захочет показывать весь свой JavaScript каждый раз, когда вы загружаете домашнюю страницу, поэтому он обслуживает только то, что нужно на главной странице. Затем, когда вы заходите в свой профиль, он загружает еще несколько javascript для этой страницы с помощью ajax. Эта опция указывает, откуда на вашем сервере загрузить этот пакет
filename указывает имя файла, в котором будет накапливаться весь ваш связанный код после прохождения этапа сборки.
path указывает выходной каталог, в котором app.js(имя файла) будет сохранен на диске. Если выходной каталог отсутствует, webpack создаст этот каталог за вас. например:
Это создаст каталог myproject/examples/dist, и в этом каталоге он создаст app.js, /myproject/examples/dist/app.js. После сборки вы можете перейти к myproject/examples/dist / app.js, чтобы увидеть связанный код.
publicPath: «Что мне здесь поставить?»
How to use __webpack_public_path__ variable in a Webpack configuration?
I am currently working on a web application using React, TypeScript and Webpack. I want Webpack to generate images URLs according to a subdomain that I only know on runtime and not during the compile time.
Note: In cases when the eventual publicPath of of output files isn’t known at compile time, it can be left blank and set dynamically at runtime in the entry point file. If you don’t know the publicPath while compiling you can omit it and set webpack_public_path on your entry point.
webpack_public_path = myRuntimePublicPath
// rest of your application entry
But I can’t get it working.
I’ve set the webpack_public_path variable in my app entry point. But how can I use its value in my Webpack config? I need to use it here:
I need to do something like this:
«loaders»: [‘url?limit=8192&name=__webpack_public_path__/images/[hash].[ext]’]
ANSWER
I’ve managed to make it work. So in my entry point file (start.tsx), I declare de __webpack_public_path__ free var before the imports and I assign its value after the imports.
Now, the public path is being used when I have an img tag:
2 Answers 2
Here’s my basic setup in terms of the generated HTML:
My main entry point script:
Not a big webpack expert, but I’m not sure you are using that loader in the right way. The url-loader is there to help you load files data that are required/imported in your code.
So if in your entry point you write something like:
You can also tell webpack what loader he needs to use by prepending the loader (and some query strings if you wish) in the require path:
Also, I’m not sure there is even a name parameter you can pass to the url-loader.
Русские Блоги
Глубокое понимание принципов разработки промежуточного программного обеспечения webpack и связанных с ним плагинов
В этой статье будут представлены пакеты промежуточного программного обеспечения и подключаемых модулей для webpack. Если вы не знаете о webpack, прочтите эту статью.Перевод。
Что такое сервер webpack dev?
webpack dev server Это сервер разработки со встроенной функцией перезагрузки в реальном времени, используемой webpack.
Что такое промежуточное ПО для разработки webpack?
Это контейнер, используемый для организации и упаковки веб-пакетов, чтобы его можно было превратить в промежуточное ПО или промежуточное ПО. Вспоминая экспресс, вы, вероятно, можете понять назначение промежуточного программного обеспечения, которое находится в процессе ввода-вывода. Обработка запястье. Проще говоря о промежуточном программном обеспечении, мы можем рассматривать его как серию Задача, действие (стек действий), не только экспресс, rake в Ruby также имеет этот механизм.
The webpack-dev-server is a little node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle.
По сравнению с прямой компиляцией в файл, пакет webpack-dev-middleware имеет еще несколько преимуществ:
Нет необходимости постоянно записывать на диск, все результаты будут напрямую сохранены в памяти
Если файл изменяется в режиме просмотра, промежуточное ПО немедленно прекращает предоставлять старую версию пакета и задерживает ответ на запрос до завершения компиляции, поэтому нам не нужно идти Понаблюдайте, закончилась ли компиляция
Что такое горячее промежуточное ПО webpack?
Все мы знаем, что сервер webpack dev предоставляет один Hot Module Replacement/Hot Reloading Функция горячей замены. В основном webpack-dev-server Когда мы будем webpack.config.js Присоединиться new webpack.HotModuleReplacementPlugin() Или включите.
Покаwebpack hot middleware Это для webpack-dev-middleware использовать. Добавим в общий сервер функцию горячей замены. webpack-dev-middleware + webpack-hot-middleware Давайте воспользуемся экспрессом для настройки сервера разработки webpack с функцией горячей замены.
Используйте промежуточное программное обеспечение webpack-dev-server
После установки пакета нам сначала нужно установить один webpack.dev.config.js Файл и в entry Добавить в webpack/hot/dev-server с webpack-hot-middleware/client
Вот этот webpack.config В основном для сервера разработки, потому что экспорт в это время будет храниться в памяти, поэтому path Можно напрямую установить как root
Затем мы начинаем писать конфигурационный файл и экспресс-программу этой среды разработки.
Мы импортируем webpack, webpack-dev-middleware, webpack-hot-middleware и express.
Если вам нужен шаблонизатор, установите ejs или jade самостоятельно.
После загрузки пакета используйте экспресс для создания http-приложения и маршрута
Вышеупомянутое является обычным серверным приложением. Чтобы достичь волшебной черной магии webpack, нам нужно импортировать настройки webpack
Дело в том, что у нас есть серверный экспресс и скомпилированный базовый веб-пакет, а затем нам нужна оболочка для упаковки веб-пакета и интеграции его в экспресс-стек промежуточного программного обеспечения.
publicPath Это URL-адрес, путь и место, где мы хотим получить доступ к пакету интерфейса. Затем мы должны добавить webpack-hot-middleware, чтобы у него была функция горячей замены.
Наконец, событие экспресс-мониторинга
Полный код сервера выглядит следующим образом
Передумать
html-webpack-plugin
Если вы продолжите добавлять html в соответствии с этой идеей, большая часть контента будет повторяться, это не очень надежно. Нам нужен способ упростить работу.
Этот комплект упрощен, как указано выше Создайте html для загрузки пакета Эти шаги особенно удобны, когда архивы, упакованные webpack, содержат хэш, который обновляется каждый раз при компиляции.
Мы можем позволить пакету помочь нам сгенерировать html или использовать загрузчики и другие механизмы шаблонов.
Основное использование
html-webpack-plugin настройки
Конечно, этот пакет также имеет некоторые параметры, так что мы можем предоставить другие функции через настройки.
title : Установить html этикетка
filename : Имя файла html также доступно как путь. По умолчанию index.html
template : Путь к шаблону, что означает, что мы можем организовать HTML перед загрузкой. html-webpack-plugin Помогите нам внедрить пакет. Обратите внимание, что в этой части относительный путь начинается с файла программы сервера.
Webpack: руководство для начинающих
Доброго времени суток, друзья!
Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.
Перед изучением новой технологии задайте себе два вопроса:
Зачем нужен вебпак?
Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».
Какие проблемы решает вебпак?
Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.
Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.
Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.
Установка вебпака
webpack.config.js
Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:
Точка входа
Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:
Если мы сообщим вебпаку путь до этого файла, он использует его для создания графа зависимостей приложения. Для этого необходимо добавить свойство entry в настройки вебпака со значением пути к главному файлу:
Преобразования с помощью лоадеров (loaders)
После добавления точки входа, нужно сообщить вебпаку о преобразованиях, которые необходимо выполнить перед генерацией бандла. Для этого используются лоадеры.
По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.
Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.
Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.
Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules :
Существуют лоадеры почти для любого типа файлов.
Точка выхода
Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.
Весь процесс выглядит примерно так:
Плагины (plugins)
Мы рассмотрели, как использовать лоадеры для обработки отдельных файлов перед или в процессе генерации бандла. В отличие от лоадеров, плагины позволяют выполнять задачи после сборки бандла. Эти задачи могут касаться как самого бандла, так и другого кода. Вы можете думать о плагинах как о более мощных, менее ограниченных лоадерах.
Давайте рассмотрим пример.
HtmlWebpackPlugin
HtmlWebpackPlugin создает index.html в директории с бандлом и автоматически добавляет в него ссылку на бандл.
Как нам использовать этот плагин? Как обычно, сначала его нужно установить.
EnvironmentPlugin
HtmlWebpackPlugin и EnvironmentPlugin — это лишь небольшая часть системы плагинов вебпака.
Режим (mode)
Существуют специальные плагины для решения указанных задачи, но есть более легкий способ. В настройках вебпака можно установить mode в значение development или production в зависимости от среды разработки.
Запуск вебпака
На данный момент мы знаем, как работает вебпак и как его настраивать, осталось его запустить.
Режимы разработки и продакшна
В целом, мы закончили с вебпаком. Напоследок давайте рассмотрим, как переключаться между режимами.
При сборке для продакшна, мы хотим все оптимизировать, насколько это возможно. В случае с режимом разработки верно обратное.
npm run build будет собирать продакшн-бандл.
npm run start будет запускать сервер для разработки и следить за изменениями файлов.
Сервер для разработки
Теперь у нас имеется две команды: одна для запуска сервера для разработки, другая для сборки готового бандла.
Надеюсь, статья была вам полезной. Благодарю за внимание.
Что делает 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://utyatnishna.ru/info/39849/picture.jpg» Re-writes ➡ src=»https://utyatnishna.ru/assets/picture.jpg»
Accessed by: ( http://server/assets/picture.jpg )
src=»https://utyatnishna.ru/img/picture.jpg» Re-writes ➡ src=»https://utyatnishna.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: «Что мне сюда поставить?»