Преимущества сборщика WebPack

1. Webpack
Человеческий подход к разработке
веб-приложений
1

2. О чем расскажу?
- Что такое webpack?
- Что умеет?
- Как работает?
- Use cases
- Мне все понравилось. Куда смотреть дальше?
2

3. Что такое webpack?
3

4. Что такое webpack?
4

5. Что умеет?
5
- сборка модулей и их зависимостей в один пакет
- сборка модулей в один пакет
- сборка с асинхронной загрузкой дополнительных
бандлов
- преобразование кода/оптимизация кода
- sass/less/postcss
- coffeescript/TypeScript/ES6/whatewerelse..
- удобная разработка
- сервер для разработки
- hot-reload

6. 6

7. 7
Да даже в паскале есть юниты!

8. А что в JS?
8

9. 9
Эволюция модульного подхода в JS

10. 10
Сначала мы писали вот так

11. 11
Object literal

12. Module pattern
12

13. RequireJS (AMD)
13

14. CommonJS
14

15. ES6 Modules
15

16. Что умеет
16
- сборка всех зависимостей в один файл
- сборка с несколькими точками входа (non-SPA)
- сборка с несколькими точками входа с асинхронной загрузкой
- выделение общих модулей
- оптимизация упаковки
- DedupePlugin
- UglifyjsPlugin
- DefinePlugin
- hot reload

17. Source code
17

18. Index.js
18

19. Определяем точку входа
19

20. Запускаем webpack
20

21. Сборка в один файл. Bundle
21

22. Что умеет
22
- сборка всех зависимостей в один файл
- сборка с несколькими точками входа (non-SPA)
- выделение общих модулей
- сборка с несколькими точками входа с асинхронной загрузкой
- оптимизация упаковки
- DedupePlugin
- UglifyjsPlugin
- DefinePlugin
- hot reload

23. Сборка в несколько файлов
23

24. Выделение общих модулей
24

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

32. Как работает?
webpack.config.js
32

33. Как работает?
33

34. Все очень просто
34

35. Загрузчики Плагины
35
sass-loader
less-loader
css-loader
file-loader
coffee-loader
babel-loader
promise-loader
ExtractTextPlugin
DedupePlugin
UglifyJsPlugin
DefinePlugin

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

39. Спасибо за внимание!
39
kr.vital@gmail.com
@krvital