Webpack проти webpack-dev-server проти webpack-dev-middleware проти webpack-hot-middleware проти тощо

95

Я починаю працювати з webpackз node/expressнавколишнім середовищем розробляє ReactJSбоку сервера винесеним додатком з react-router. Я дуже заплутаний щодо ролі кожного пакета webpack для середовищ dev та prod (runtime).

Ось короткий зміст мого розуміння:

webpack: Це пакет, інструмент для об’єднання різних частин веб-програми та об’єднання в один файл .js (зазвичай bundle.js). Потім файл результатів подається у середовищі prod для завантаження додатком і містить усі необхідні компоненти для запуску коду. Особливості включають зменшення коду, мініфікацію тощо.

webpack-dev-server: Це пакет, який пропонує сервер для обробки файлів веб-сайтів. Він також створює один файл .js ( bundle.js) з клієнтських компонентів, але подає його в пам'ять. Він також має опцію ( -hot) контролювати всі будівельні файли та створювати новий пакет в пам'яті на випадок зміни коду. Сервер обслуговується безпосередньо у браузері (наприклад:) http:/localhost:8080/webpack-dev-server/whatever. Поєднання завантаження пам'яті, гарячої обробки та обслуговування браузера дозволяє користувачеві оновлювати додаток у браузері при зміні коду, ідеально підходить для середовища розробки.

Якщо у мене є сумніви щодо вищевказаного тексту, я справді не впевнений у вмісті нижче, тому, будь ласка, повідомте мені, якщо це необхідно

Поширеною проблемою при використанні webpack-dev-serverз node/expressє те, що webpack-dev-serverце сервер, як є node/express. Це робить це середовище складним для запуску як клієнта, так і деякого вузлового / експрес-коду (API тощо). ПРИМІТКА: Це те, з чим я стикався, але було б чудово зрозуміти, чому це відбувається більш докладно ...

webpack-dev-middleware: Це проміжне програмне забезпечення з тими ж функціями webpack-dev-server(зв’язування пам’яті, гаряче перезавантаження), але у форматі, який можна вводити в server/expressдодаток. Таким чином, у вас є свого роду сервер ( webpack-dev-serverвнутрішній сервер вузла). На жаль: це божевільна мрія ??? Як ця частина може розв’язати рівняння розробників та розробників та спростити життя

webpack-hot-middleware: Це ... Застряг тут ... знайшов цей шматок при пошуку webpack-dev-middleware... Не знаю, як ним користуватися.

ПРИМІТКА: Вибачте, є помилкове мислення. Мені дійсно потрібна допомога, щоб не сприймати ці варіанти в складних умовах. Якщо це незрозуміло, додайте більше пакетів / даних, які будуватимуть весь сценарій.

javascript  node.js  webpack  webpack-dev-server  webpack-dev-middleware 
— Мендес
джерело
2
Жоден з перелічених тут пакетів не використовується на стороні сервера у виробництві - це лише інструменти розробника. Ви б використали webpack-dev-middleware(і потенційно webpack-hot-middleware), якщо хочете написати свій власний сервер розробки. Якщо немає певної функції, яку ви хочете webpack-dev-serverне мати, вам слід просто використовувати її.
— Джо Клей

Відповіді:

120

webpack

Як ви вже описували, Webpack - це модульний пакет, який в основному поєднує різні формати модулів, щоб їх можна було запускати у браузері. Він пропонує як CLI, так і Node API .

webpack-dev-middleware

Webpack Dev Middleware - це проміжне програмне забезпечення, яке можна встановити на експрес-сервері, щоб обслуговувати останню компіляцію вашого пакета під час розробки. Тут використовується webpackNode API у режимі перегляду, і замість виведення у файлову систему він виводиться в пам'ять .

Для порівняння, ви можете використовувати щось на зразок express.staticцього проміжного програмного забезпечення у виробництві.

webpack-dev-server

Webpack Dev Server сам по собі є експрес- сервером, який використовує webpack-dev-middlewareдля обслуговування найновішого пакета та додатково обробляє запити на заміну гарячих модулів (HMR) для оновлення модулів в реальному часі в клієнті.

webpack-hot-middleware

Webpack Hot Middleware є альтернативою, webpack-dev-serverале замість того, щоб запускати сам сервер, він дозволяє змонтувати його на існуючому / спеціальному експрес-сервері поряд webpack-dev-middleware.

Також ...

webpack-hot-server-middleware

Просто щоб заплутати ще більше, є також Webpack Hot сервер Middleware , який призначений для використання разом webpack-dev-middlewareі webpack-hot-middlewareдля обробки гарячої заміни модулів серверних додатків візуалізації.

— рискаррот
джерело
2
Для тих , хто в пошуках переднього кінця проти фоновим гарячої пробою заміни модуля, будь ласка , см цей пост: stackoverflow.com/questions/46086297 / ... Xlee робить хорошу роботу , яка пояснює вимоги до кожної сторони - на стороні сервера , що вимагають перезавантаження , інтерфейс, що дозволяє завантажувати оновлені пакети javascript.
— abelito
9

Станом на оновлення у 2018 році та враховуючи примітку про webpack-dev-сервер на його офіційній сторінці GitHub:

Проект у технічному обслуговуванні Зверніть увагу, що веб-сервер webpack-dev наразі перебуває в режимі лише для технічного обслуговування і найближчим часом не буде приймати жодних додаткових функцій. Більшість нових запитів на функції можна виконати за допомогою проміжного програмного забезпечення Express; будь ласка, ознайомтесь із використанням гачків до та після у документації.

Що було б природним вибором для створення веб-пакета HMR?

— Мендес
джерело
2
У ньому також написано, Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.отже, ви можете спробувати webpack-serve .
— Bruce Sun
3
Примітка щодо технічного обслуговування була видалена. Тож, мабуть, рекомендується ще раз ??? Божевільний, що настільки важливий інструмент розробника має настільки жахливу команду супровідників.
— Капітан Фогетті,
5
webpack-serve застаріло, і, як @CaptainFogetti сказав, що примітка про технічне обслуговування була вилучена з webpack-dev-сервера на сьогодні
— Anoop D,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.