Webpack-dev-server - установка, запуск і настройка

• Усе
• Backend
• Frontend
• Workflow
• Дизайн
• Різне
• Мови програмування

• • # 3 - Як почати працювати (System.js)

  • # 4 - Як почати працювати (Angular CLI)

  • # 2 - Як почати працювати (plnkr.co)

• • # 5 - Асоціації. Багато до багатьох

  • Що нового на хостингу з оплатою за ресурси «Elasticweb»?

  • # 7 - Синхронізація проекту з віддаленим сервером в PHPStorm. Deployment.

• • # 3 - Як почати працювати (System.js)

  • # 4 - Як почати працювати (Angular CLI)

  • # 2 - Як почати працювати (plnkr.co)

  • # 1 - Як почати працювати (script tag)

• • # 14 - File-loader при роботі з зображеннями

  • # 13 - UglifyJsPlugin - плагін для мініфіцірованія js-коду

  • # 12 - ProvidePlugin - плагін, що включає модулі самостійно

  • # 11 - CommonsChunkPlugin - плагін, який виносить загальний код з css- і js-файлів

• • # 1 - Вступний урок

  • # 4 - Модульна сітка в Photoshop

  • # 5 - 5 фішок фотошопа для веб-дизайну.

• • # 5 - Ефективний керівник IT-проектів

  • # 4 - Scrum - детальний розгляд методології

  • # 4 - Створюємо технічне завдання на мобільний додаток

  • # 3 - Каскадний, або класичний, метод управління проектами

• • # 3 - Як почати працювати (System.js)

  • # 4 - Як почати працювати (Angular CLI)

  • # 2 - Як почати працювати (plnkr.co)

  • # 1 - Як почати працювати (script tag)

    • Усе
    • DevShow
    • Loftcast
    • Loftnews
    • LoftSchool
    • LoftVlog
    • інтерв'ю
    • • # 23: ІГРИ ДЛЯ ПРОГРАМІСТІВ!

      • NIMAX. Екскурсія в Діджитал світ. Інтерв'ю з Микитою Міхеенковим

    • • # 23: ІГРИ ДЛЯ ПРОГРАМІСТІВ!

      • # 23: Як шукати роботу веб-розробником?

      • # 22: Кращі попап, зринаючі підказки і модальні вікна

      • # 21: Музика для програмістів - що слухати, коли пишеш код?

    • • Loftcast # 3 - browsersync, marksheet, sublime text vs atom vs brackets

      • Loftcast # 2 - Responsive Patterns, Atom, PostCssков

      • Loftcast # 1 - dotdotdot.js. webpack, plainjs.com

    • • Samsung S8, Apple Pay, Made by Google, Samsung Pay, PPAP

      • iPhone 8, YouTube Go, Android plus Chrome OS, React

      • Samsung вибухає, Bootstrap Deprecated, iPhone 7, Apple Watch, iOS 10

      • LoftNews # 30 - Fiat 124 Spider Sport, auto.ru, Google Maps

    • • Як програмісту провести зимівлю в Таї?

      • Як IT-фахівця заробляти віддалено і жити в будь-якій точці світу?

      • Upwork - стратегії входу, мова, профіль і подача заявок

      • Як пройти випробувальний термін? Топ рад від засновників LoftSchool

    • • Москва Сіті, LoftSchool на фотосесії, підготовка до LBMM

      • З Пітера в Москву. В гостях у Авито. Готуємо MeetUp!

      • Де працює Loft Team

    • • NIMAX. Екскурсія в Діджитал світ. Інтерв'ю з Микитою Міхеенковим

      • Гліб Кушедов, засновник Epic Skills: Освіта в IT

        Всім привіт! Мене звуть Ковальчук Дмитро. Ви дивіться Лофтскул. Ми продовжуємо вивчати Webpack.

        Для ще більшої зручності розробників, в офіційній документації Webpack нам пропонується використовувати "webpack-dev-server". У ньому вбудований локальний сервер і livereload ( "жива перезавантаження браузера"). WDS також порадує вас можливістю гнучкого налаштування. Окремо хочеться виділити 2 моменти:

        1. Webpack-dev-server працює "в пам'яті" ( "server running in-memory") - він не створює в каталозі проекту скомпільованих файлів.

        2. "Hot Module Replacement (HMR)" - дозволяє оновлювати окремі модулі сторінки, без її повного перезавантаження. Повну потужність можна відчути при використанні з React.

        1. Установка і запуск webpack-dev-server

        Встановимо webpack-dev-server і збережемо його в package.json.

        yarn add webpack - dev - server - D

        Щоб інтегрувати webpack-dev-server в наш проект, ми повинні визначити новий npm-скрипт (в package.json файлі).
        Ми назвемо його «start». А скрипт, який запускає Webpack зі стеженням замінимо на простий запуск Webpack без стеження. Його завдання - просто збирати проект, і назва йому дамо відповідне - «build».

        Так і зробимо. У браузері ми побачимо наш сайт, подібно до того, як це було зі статичним сервером.
        Однак тепер у нашому арсеналі з'явився livereload. Спробуємо внести зміни в шаблони або в js-файли.

        Видаліть папку build і ще раз переконайтеся - в каталозі вашого проекту немає скомпільованих файлів, тобто WDS "збирає" проект прямо в пам'ять.

        WDS не рекомендується використовувати для продакшена, тому перевіряти зібрану за допомогою Webpack збірку ми можемо, як і раніше, за допомогою «node-static».

        2. Базова настройка webpack-dev-server

        У WDS, як було сказано раніше, є величезна кількість налаштувань. Всі ці настройки необхідно поміщати в об'єкт "devServer", який є властивістю модуля, що експортується конфіг Webpack. Для нашого прикладу досить буде розглянути одне властивість "stats". Дамо йому значення 'errors-only'. Тепер, при запуску webpack-dev-server, в консолі ми побачимо набагато менше інформації (а саме "тільки помилки").