2015-11-07 01 Виталий Кравцов. webpack: человеческий подход к...

WebpackЧеловеческий подход к разработке

веб-приложений1

О чем расскажу?

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

2

Что такое webpack?

3

Что такое webpack?

4

Что умеет?

5

- сборка модулей и их зависимостей в один пакет- сборка модулей в один пакет- сборка с асинхронной загрузкой дополнительных

бандлов- преобразование кода/оптимизация кода

- sass/less/postcss- coffeescript/TypeScript/ES6/whatewerelse..

- удобная разработка- сервер для разработки- hot-reload

6

7

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

А что в JS?

8

9

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

10

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

11

Object literal

Module pattern

12

RequireJS (AMD)

13

CommonJS

14

ES6 Modules

15

Что умеет

16

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

- DedupePlugin- UglifyjsPlugin- DefinePlugin

- hot reload

Source code

17

Index.js

18

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

19

Запускаем webpack

20

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

21

Что умеет

22

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

- DedupePlugin- UglifyjsPlugin- DefinePlugin

- hot reload

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

23

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

24

Что умеет

25

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

- DedupePlugin- UglifyjsPlugin- DefinePlugin

- hot reload

Сборка с асинхронной загрузкой доп модулей

26

AMD синтаксис

require.ensure

27

Что умеет

28

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

- DedupePlugin- UglifyjsPlugin- DefinePlugin

- hot reload

Оптимизация кодаUglifyJsPlugin - обфускация + минификация кода, DedupePlugin

29

Что умеет

30

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

- DedupePlugin- UglifyjsPlugin- DefinePlugin

- hot reload

Hot reload

31

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

32

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

33

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

34

Загрузчики Плагины

35

sass-loader

less-loader

css-loader

file-loader

coffee-loader

babel-loader

promise-loader

ExtractTextPlugin

DedupePlugin

UglifyJsPlugin

DefinePlugin

Загрузчики

36

Плагины

37

Мне все понравилось. Куда смотреть дальше?

Официальный сайт http://webpack.github.io

Курс от Ильи Кантора https://www.youtube.com/playlist?list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn

"Webpack: 7 бед — один ответ" Денис Измайловhttps://www.youtube.com/watch?v=kuXIgUsvpLo

Владимир Кузнецов, Graph | Глубокое погружение в webpackhttps://www.youtube.com/watch?v=IpCrjoDPrQQ

Angular + webpackhttp://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/https://github.com/Foxandxss/angular-webpack-workflow (склонируй и используй)

38

Спасибо за внимание!

39

kr.vital@gmail.com@krvital