2015-11-07 01 Виталий Кравцов. webpack: человеческий подход к...
TRANSCRIPT
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
