MoscowJS 26 webpack presentation
-
Upload
lgordey -
Category
Technology
-
view
213 -
download
1
Transcript of MoscowJS 26 webpack presentation
![Page 1: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/1.jpg)
Немного черной магии webpack и разоблачений
Левченко ГордейИнженер-разработчик клиентских приложений
Rambler&Co
MoscowJS
![Page 2: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/2.jpg)
No problem
![Page 3: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/3.jpg)
План доклада
1. Коротко о Webpack
2. Решение задачи
![Page 4: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/4.jpg)
Webpack
![Page 5: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/5.jpg)
Webpack• AMD & СommonJS• Entry points• Webpack-dev-server• Hash • Chunk
![Page 6: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/6.jpg)
SVG SPRITE - SVGSTORE
<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>
![Page 7: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/7.jpg)
Варианты решения
1. Loaders
2. Plugins
![Page 8: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/8.jpg)
Loader? Plugin?
![Page 9: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/9.jpg)
Loaders - что это?
• загрузка
• преобразование
![Page 10: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/10.jpg)
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
![Page 11: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/11.jpg)
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
![Page 12: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/12.jpg)
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
![Page 13: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/13.jpg)
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
![Page 14: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/14.jpg)
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
![Page 15: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/15.jpg)
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
![Page 16: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/16.jpg)
Loaders - категории
• Basic• Packaging• Dialects• Styling• Templating
![Page 17: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/17.jpg)
Loaders - how to write
module.exports = function(source) { return source;};
module.exports = function(source, map) { this.callback(null, source, map);};
![Page 18: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/18.jpg)
Loaders - config
module: {
loaders: [
{ test: /\.jade$/, loader: 'jade-loader' }, { test: /\.json$/, loader: 'json-loader' },
…
]
}
![Page 19: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/19.jpg)
Loaders - file-loader
{
test: /\.(png|jp?g|gif)$/i, loader: 'file?name=[name].[hash].[ext]'
}
logo.png => logo.c21c79decca12.png
![Page 20: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/20.jpg)
Loaders - style-loader
{
test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
}
![Page 21: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/21.jpg)
Plugins
![Page 22: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/22.jpg)
Plugins - что это?
• apply
• compiler
• compilation
![Page 23: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/23.jpg)
Plugins - main sources
• Compiler
• Compilation
![Page 24: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/24.jpg)
Plugins - Compiler
• Сконфигурированная среда webpack
• Доступ к этапам компиляции
![Page 25: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/25.jpg)
Plugins - Compiler
![Page 26: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/26.jpg)
Plugins - interface typesfunction HelloWorldPlugin(options) { // Setup the plugin instance with options...}
HelloWorldPlugin.prototype.apply =
function(compiler) {
compiler.plugin('done', function() { console.log('Hello World!'); });
};
module.exports = HelloWorldPlugin;
![Page 27: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/27.jpg)
Plugins - interface types
run compile compilation emit done
load modules
optimize modules
optimize chunks
hashed
![Page 28: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/28.jpg)
Plugins - Compilation
• Single build
![Page 29: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/29.jpg)
Plugins - Compilation
![Page 30: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/30.jpg)
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(); });
Plugins - how to write
![Page 31: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/31.jpg)
![Page 32: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/32.jpg)
Задача
![Page 33: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/33.jpg)
Задача - требования
• Минификация svg
• Сборка нескольких спрайтов
• Добавление собранных спрайтов в манифест
![Page 34: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/34.jpg)
Manifest.json
“app.css": “e387d110eeab67b8s1r.app.css",
“app.js”: "809f329c512f0b75a7f.app.js",
![Page 35: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/35.jpg)
Задача - svg спрайты
• Создание спрайта
• Добавление в compilation.assets
![Page 36: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/36.jpg)
compiler.plugin('emit', function(compilation, callback) {
compilation.assets[mySpriteName] = { source: function() { return source; }, size: function() { return source.length; } };
callback();});
Задача - svgstore
![Page 37: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/37.jpg)
![Page 38: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/38.jpg)
Вывод
• Изучение возможностей инструмента
• Поиск решения
• Возможные варианты реализации
![Page 39: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/39.jpg)
Заключение
• Webpack
• Изучаем документацию
• Ставим pull requests
• Делаем вклад в OpenSource
![Page 40: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/40.jpg)
![Page 41: MoscowJS 26 webpack presentation](https://reader035.fdocumento.com/reader035/viewer/2022062302/58cfd5851a28ab13238b4d41/html5/thumbnails/41.jpg)
Спасибо за внимание!Вопросы?
https://github.com/lgordey
http://lgordey.github.io/