2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб приложений
- 1. Webpack Человеческий подход к разработке веб-приложений 1
- 2. О чем расскажу? - Что такое webpack? - Что умеет? - Как работает? - Use cases - Мне все понравилось. Куда смотреть дальше? 2
- 5. Что умеет? 5 - сборка модулей и их зависимостей в один пакет - сборка модулей в один пакет - сборка с асинхронной загрузкой дополнительных бандлов - преобразование кода/оптимизация кода - sass/less/postcss - coffeescript/TypeScript/ES6/whatewerelse.. - удобная разработка - сервер для разработки - hot-reload
- 6. 6
- 7. 7 Да даже в паскале есть юниты!
- 8. А что в JS? 8
- 9. 9 Эволюция модульного подхода в JS
- 10. 10 Сначала мы писали вот так
- 14. CommonJS 14
- 15. ES6 Modules 15
- 16. Что умеет 16 - сборка всех зависимостей в один файл - сборка с несколькими точками входа (non-SPA) - сборка с несколькими точками входа с асинхронной загрузкой - выделение общих модулей - оптимизация упаковки - DedupePlugin - UglifyjsPlugin - DefinePlugin - hot reload
- 17. Source code 17
- 18. Index.js 18
- 21. Сборка в один файл. Bundle 21
- 22. Что умеет 22 - сборка всех зависимостей в один файл - сборка с несколькими точками входа (non-SPA) - выделение общих модулей - сборка с несколькими точками входа с асинхронной загрузкой - оптимизация упаковки - DedupePlugin - UglifyjsPlugin - DefinePlugin - hot reload
- 23. Сборка в несколько файлов 23
- 25. Что умеет 25 - сборка всех зависимостей в один файл - сборка с несколькими точками входа (non-SPA) - выделение общих модулей - сборка с несколькими точками входа с асинхронной загрузкой - оптимизация упаковки - DedupePlugin - UglifyjsPlugin - DefinePlugin - hot reload
- 26. Сборка с асинхронной загрузкой доп модулей 26 AMD синтаксис require.ensure
- 27. 27
- 28. Что умеет 28 - сборка всех зависимостей в один файл - сборка с несколькими точками входа (non-SPA) - выделение общих модулей - сборка с несколькими точками входа с асинхронной загрузкой - оптимизация упаковки - DedupePlugin - UglifyjsPlugin - DefinePlugin - hot reload
- 29. Оптимизация кода UglifyJsPlugin - обфускация + минификация кода, DedupePlugin 29
- 30. Что умеет 30 - сборка всех зависимостей в один файл - сборка с несколькими точками входа (non-SPA) - выделение общих модулей - сборка с несколькими точками входа с асинхронной загрузкой - оптимизация упаковки - DedupePlugin - UglifyjsPlugin - DefinePlugin - hot reload
- 31. Hot reload 31
- 33. Как работает? 33
- 36. Загрузчики 36
- 37. Плагины 37
- 38. Мне все понравилось. Куда смотреть дальше? Официальный сайт http://webpack.github.io Курс от Ильи Кантора https://www.youtube.com/playlist?list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn "Webpack: 7 бед — один ответ" Денис Измайлов https://www.youtube.com/watch?v=kuXIgUsvpLo Владимир Кузнецов, Graph | Глубокое погружение в webpack https://www.youtube.com/watch?v=IpCrjoDPrQQ Angular + webpack http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/ https://github.com/Foxandxss/angular-webpack-workflow (склонируй и используй) 38