Що робить "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/")

Вебпак виведе все на 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

Скажіть, будь ласка, де знаходиться папка активів? Я хотів би бачити файли в папці активів Спасибі.

— gauti

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-сервер у виробничій середовищі, тому я думаю, що це лише для середовищ Dev Enviroment

— Шон

1

З цього веб- пакета.github.io/docs/configuration.html#output-publicpath, схоже, цей параметр пропонує веб-упаковці заповнити правильний URL або шлях активів у створених файлах, а не лише для середнього рівня. Під час роботи сервера dev, я думаю, що середнє програмне забезпечення намагається publichPathзахопити запити та повернути файли в пам'яті.

— Вень

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

— Шон

7

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

— Charlie Martin

19

Ви можете використовувати publicPath, щоб вказати на місце, де ви хочете, щоб webpack-dev-сервер обслуговував свої "віртуальні" файли. Опція publicPath буде тим самим розташуванням опції збирання контенту для webpack-dev-сервера. webpack-dev-сервер створює віртуальні файли, які він буде використовувати при запуску. Ці віртуальні файли нагадують фактичні файли, що створюються в комплекті. В основному ви хочете, щоб параметр --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-сервер створив папку віртуальних активів разом з віртуальним файлом bundle.js, на який він посилається. Ви можете перевірити це, перейшовши до localhost: 8080 / elements / bundle.js, а потім перевірити у своїй програмі ці файли. Вони генеруються лише під час запуску webpack-dev-сервера.

— Ісаак Пак
джерело

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

— ArchNoob

Вибачте за пізню відповідь. Вам не потрібно змінювати src. Незалежно від вашого виробництва чи розробки, webpack створить bundle.js на вихідному шляху. У наведеному вище прикладі це буде /build/bundle.js.

— Ісаак Пак

Дякую, я запитую про srcрядок у файлі index.html. Зараз він вказує на те, "assets/bundle.js"якщо він перейде до виробництва, пакет буде знаходитися, "build/bundle.js"тому мені доведеться змінити це в рядку htc src на src="build/bundle.js". Або є більш автоматизований спосіб?

— ArchNoob

2

Зараз я розумію ваше запитання. Так, вам потрібно буде змінити src на build / bundle.js для виробництва. Щодо автоматизованого способу зробити це, я не впевнений. Я бачив, як інші створюють два різних файли webpack.config.js, один для виробництва та один для розробки. Мабуть, існує програмний спосіб, як, якщо (ENV === виробництво) це роблять ... але я цього не пробував.

— Ісаак Пак

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

— Ісаак Пак

15

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

тому, якщо є файл js, який є початковим URL-адресом посилання у html, це './js/my.js', він повинен стати http://my.cdn.com/js/my.js у виробничому середовищі

у цьому випадку мені потрібно просто встановити параметр publicpath дорівнює http://my.cdn.com/, і webpack автоматично додасть цей префікс

— Кент Вуд
джерело

Схоже, в моєму випадку не додається префікс.

— Парам Сінгх

14

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

path вказує вихідний каталог, куди app.js (ім'я файлу) збирається зберегти на диску. Якщо немає вихідного каталогу, webpack створить цей каталог для вас. наприклад:

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

Це створить каталог myproject / example / dist і під цим каталогом створюється app.js , /myproject/examples/dist/app.js . Після побудови ви можете перейти до myproject / example / dist / app.js, щоб побачити пакет, що входить у комплект

publicPath: "Що мені тут помістити?"

publicPath вказує віртуальний каталог на веб-сервері, звідки надходить пакетний файл, з якого збирається застосувати app.js. Майте на увазі, що сервер слів при використанні publicPath може бути або webpack-dev-сервером, або експрес-сервером, або іншим сервером, який ви можете використовувати з webpack.

наприклад

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

ця конфігурація повідомляє webpack об'єднати всі ваші js-файли в приклад / dist / app.js і записати в цей файл.

publicPath говорить WebPack-DEV-сервер або експрес - сервер для обслуговування цього файлу в комплекті тобто прикладів / відстань / app.js від зазначеного віртуального місця в сервері тобто / Public / активи / Js. Отже, у вашому HTML-файлі ви повинні посилатися на цей файл як

<script src="public/assets/js/app.js"></script>

Отже, підсумовуючи, publicPath - це як відображення між virtual directoryвашим сервером та output directoryвизначеним конфігурацією output.path. Кожен раз, коли надходить запит на файл public / tools / js / app.js , /examples/dist/app.js файл буде поданий

— udeep shrestha
джерело

2

добре пояснено!

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

3

Документація webpack2 пояснює це значно чіткіше: https://webpack.js.org/guides/public-path/#use-cases

webpack має дуже корисну конфігурацію, яка дозволяє вказати базовий шлях для всіх активів вашої програми. Це називається publicPath.

— Алан
джерело

2

publicPath використовується webpack для заміни відносного шляху, визначеного у вашому css, для оновлення зображення та файлу шрифту.

— Халид Азам
джерело