1

Этап 1

Прохождение курса

2

Этап 2

Своя сборка

1

Этап 1

Прохождение курса

2

Этап 2

Своя сборка

17 июля 2018 27 июля 2018
Цель завершена 23 июля 2018
Общая

A byte of webpack

В современном фронтенде очень много рутин и задач для автоматизации. На сегодняшний день самыми популярными решениями являются gulp и webpack. Я делаю выбор в пользу последнего и должен освоить его.

Безусловно можно просто взять и скачать чужой готовый шаблон, но мы не ищем легких путей. Я привык знать все свои инструменты в лицо.

Проходить буду этот курс

 Критерий завершения

Курс пройден.

Создана и выложена на гитхаб своя сборка вебпака.

 Личные ресурсы

Время, базовый опыт работы как с галпом, так и с вебпаком прошлых версий.

 Экологичность цели

Невозможно сегодня работать эффективно без инструментов сборки и автоматизации.

А для действительно хорошей производительности инструмент нужно еще и "заточить" под себя.

  1. Прохождение курса

    1. Урок 1. Introduction

    2. Урок 2. Problems with Script Loading

    3. Урок 3. History of Modules

    4. Урок 4. EcmaScript Modules (ESM)

    5. Урок 5. Introducing Webpack

    6. Урок 6. Configuring Webpack

    7. Урок 7. Using Webpack for the First Time

    8. Урок 8. Adding npm Scripts for Environment Builds

    9. Урок 9. Setting Up Debugging

    10. Урок 10. Coding Your First Module

    11. Урок 11. Adding Watch Mode

    12. Урок 12. ES Module Syntax

    13. Урок 13. CommonJS Export

    14. Урок 14. CommonJS Named Exports

    15. Урок 15. Tree Shaking

    16. Урок 16. Webpack Bundle Walkthrough

    17. Урок 17. Webpack Entry

    18. Урок 18. Output & Loaders

    19. Урок 19. Chaining Loaders

    20. Урок 20. Webpack Plugins

    21. Урок 21. Webpack Config

    22. Урок 22. Passing Variable to Webpack Config

    23. Урок 23. Adding Webpack Plugins

    24. Урок 24. Setting Up a Local Development Server

    25. Урок 25. Starting to Code with Webpack

    26. Урок 26. Splitting Environment Config Files

    27. Урок 27. Webpack Q&A

    28. Урок 28. Using CSS with Webpack

    29. Урок 29. Hot Module Replacement with CSS

    30. Урок 30. File Loader & URL Loader

    31. Урок 31. Loading Images with JavaScript

    32. Урок 32. Limit Filesize Option in URL Loader

    33. Урок 33. Implementing Presets

    34. Урок 34. Bundle Analyzer Preset

    35. Урок 35. Compression Plugin

    36. Урок 36. Source Maps

    37. Урок 37. Q&A and Closing Remarks

  2. Своя сборка

    Минимальный конфиг для работы должен содержать:

    1. Тестовый сервер.

    2. CSS. Компиляция sass в css, перемещение, сообщения об ошибках, автопрефиксы, сжатие.

    3. Шрифты.

    4. JS. Компиляция. Сжатие.

    5. HTML. Компиляция pug в html.

    6. Графика.

    7. SVG.

  • 720
  • 17 июля 2018, 14:13
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?