Presentation about webpack on moscowJS

1. Немного черной
магии webpack
и разоблачений
Левченко Гордей
Инженер-разработчик клиентских приложений
Rambler&Co
1
g.levchenko@rambler-co.ru
MoscowJS

2. No problem
2

3. 3
План доклада
1. Коротко о Webpack
2. Решение задачи

4. Webpack
4

5. Webpack
• AMD & СommonJS
• Entry points
• Webpack-dev-server
• Hash
• Chunk
5

6. SVG SPRITE -
SVGSTORE
6
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-arrow" viewBox="0 0 22 23">
</symbol>
<symbol id="icon-close" viewBox="0 0 34 34">
</symbol>
</svg>
<svg class="icon">
<use xlink:href=“#icon-arrow" />
</svg>
<svg class="icon">
<use xlink:href=“#icon-close" />
</svg>

7. Варианты решения
1. Loaders
2. Plugins
7

8. Loader? Plugin?
8

9. Loaders - что это?
• загрузка
• преобразование
9

10. Loaders - wtf???
10
var $ = require('jquery');
require('_lib/auth');
require('_lib/menu');
require('_lib/gallery');
require('_style/app.sass');
app.js

11. Loaders - wtf???
11
var $ = require('jquery');
require('_lib/auth');
require('_lib/menu');
require('_lib/gallery');
require('_style/app.sass');
app.js

12. Loaders - wtf???
12
var $ = require('jquery');
require('_lib/auth');
require('_lib/menu');
require('_lib/gallery');
require('_style/app.sass');
app.js

13. Loaders - wtf???
13
var $ = require('jquery');
require('_lib/auth');
require('_lib/menu');
require('_lib/gallery');
require('_style/app.sass');
app.js

14. Loaders - wtf???
14
var $ = require('jquery');
require('_lib/auth');
require('_lib/menu');
require('_lib/gallery');
require('_style/app.sass');
app.js

15. Loaders - wtf???
15
var $ = require('jquery');
require('_lib/auth');
require('_lib/menu');
require('_lib/gallery');
require('_style/app.sass');
app.js

16. Loaders - категории
• Basic
• Packaging
• Dialects
• Styling
• Templating
16

17. Loaders - how to write
module.exports = function(source) {
return source;
};
module.exports = function(source, map) {
this.callback(null, source, map);
};
17

18. Loaders - config
module: {
loaders: [
{ test: /.jade$/, loader: 'jade-loader' },
{ test: /.json$/, loader: 'json-loader' },
…
]
}
18

19. Loaders - file-loader
{
test: /.(png|jp?g|gif)$/i,
loader: 'file?name=[name].[hash].[ext]'
}
19
logo.png => logo.c21c79decca12.png

20. Loaders - style-loader
{
test: /.styl$/,
loader: 'style-loader!css-loader!stylus-loader'
}
20

21. Plugins
21

22. Plugins - что это?
22
• apply
• compiler
• compilation

23. Plugins - main sources
23
• Compiler
• Compilation

24. Plugins - Compiler
• Сконфигурированная среда webpack
• Доступ к этапам компиляции
24

25. Plugins - Compiler
25

26. 26
Plugins - interface types
function HelloWorldPlugin(options) {
// Setup the plugin instance with options...
}
HelloWorldPlugin.prototype.apply =
function(compiler) {
compiler.plugin('done', function() {
console.log('Hello World!');
});
};
module.exports = HelloWorldPlugin;

27. 27
Plugins - interface types
run compile compilation emit done
load modules
optimize modules
optimize chunks
hashed

28. Plugins - Compilation
28
• Single build

29. Plugins - Compilation
29

30. compiler.plugin('emit', function(compilation, callback) {
for (var filename in compilation.assets) {
filelist += ('- '+ filename +'n');
}
compilation.assets['filelist.md'] = {
source: function() {
return filelist;
},
size: function() {
return filelist.length;
}
}
callback();
});
30
Plugins - how to write

32. Задача
32

33. Задача - требования
• Минификация svg
• Сборка нескольких спрайтов
• Добавление собранных спрайтов в манифест
33

34. Manifest.json
“app.css": “e387d110eeab67b8s1r.app.css",
“app.js”: "809f329c512f0b75a7f.app.js",
34

35. Задача - svg спрайты
• Создание спрайта
• Добавление в compilation.assets
35

36. compiler.plugin('emit', function(compilation, callback) {
compilation.assets[mySpriteName] = {
source: function() {
return source;
},
size: function() {
return source.length;
}
};
callback();
});
Задача - svgstore
36

37. 37

38. Вывод
• Изучение возможностей инструмента
• Поиск решения
• Возможные варианты реализации
38

39. Заключение
• Webpack
• Изучаем документацию
• Ставим pull requests
• Делаем вклад в OpenSource
39

40. 40

41. Спасибо за внимание!
Вопросы?
levchenko.gordey@gmail.com
https://github.com/lgordey
41
http://lgordey.github.io/