A byte of webpack
В современном фронтенде очень много рутин и задач для автоматизации. На сегодняшний день самыми популярными решениями являются gulp и webpack. Я делаю выбор в пользу последнего и должен освоить его.
Безусловно можно просто взять и скачать чужой готовый шаблон, но мы не ищем легких путей. Я привык знать все свои инструменты в лицо.
Критерий завершения
Курс пройден.
Создана и выложена на гитхаб своя сборка вебпака.
Личные ресурсы
Время, базовый опыт работы как с галпом, так и с вебпаком прошлых версий.
Экологичность цели
Невозможно сегодня работать эффективно без инструментов сборки и автоматизации.
А для действительно хорошей производительности инструмент нужно еще и "заточить" под себя.
-
Прохождение курса
-
Урок 1. Introduction
-
Урок 2. Problems with Script Loading
-
Урок 3. History of Modules
-
Урок 4. EcmaScript Modules (ESM)
-
Урок 5. Introducing Webpack
-
Урок 6. Configuring Webpack
-
Урок 7. Using Webpack for the First Time
-
Урок 8. Adding npm Scripts for Environment Builds
-
Урок 9. Setting Up Debugging
-
Урок 10. Coding Your First Module
-
Урок 11. Adding Watch Mode
-
Урок 12. ES Module Syntax
-
Урок 13. CommonJS Export
-
Урок 14. CommonJS Named Exports
-
Урок 15. Tree Shaking
-
Урок 16. Webpack Bundle Walkthrough
-
Урок 17. Webpack Entry
-
Урок 18. Output & Loaders
-
Урок 19. Chaining Loaders
-
Урок 20. Webpack Plugins
-
Урок 21. Webpack Config
-
Урок 22. Passing Variable to Webpack Config
-
Урок 23. Adding Webpack Plugins
-
Урок 24. Setting Up a Local Development Server
-
Урок 25. Starting to Code with Webpack
-
Урок 26. Splitting Environment Config Files
-
Урок 27. Webpack Q&A
-
Урок 28. Using CSS with Webpack
-
Урок 29. Hot Module Replacement with CSS
-
Урок 30. File Loader & URL Loader
-
Урок 31. Loading Images with JavaScript
-
Урок 32. Limit Filesize Option in URL Loader
-
Урок 33. Implementing Presets
-
Урок 34. Bundle Analyzer Preset
-
Урок 35. Compression Plugin
-
Урок 36. Source Maps
-
Урок 37. Q&A and Closing Remarks
-
-
Своя сборка
Минимальный конфиг для работы должен содержать:
-
Тестовый сервер.
-
CSS. Компиляция sass в css, перемещение, сообщения об ошибках, автопрефиксы, сжатие.
-
Шрифты.
-
JS. Компиляция. Сжатие.
-
HTML. Компиляция pug в html.
-
Графика.
-
SVG.
-
- 808
- 17 июля 2018, 14:13
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением