Немного черной магии webpack и разоблачений
Левченко ГордейИнженер-разработчик клиентских приложений
Rambler&Co
MoscowJS
No problem
План доклада
1. Коротко о Webpack
2. Решение задачи
Webpack
Webpack• AMD & СommonJS• Entry points• Webpack-dev-server• Hash • Chunk
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>
Варианты решения
1. Loaders
2. Plugins
Loader? Plugin?
Loaders - что это?
• загрузка
• преобразование
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
Loaders - wtf???
var $ = require('jquery');
require('_lib/auth');require('_lib/menu');require('_lib/gallery');
require('_style/app.sass');
app.js
Loaders - категории
• Basic• Packaging• Dialects• Styling• Templating
Loaders - how to write
module.exports = function(source) { return source;};
module.exports = function(source, map) { this.callback(null, source, map);};
Loaders - config
module: {
loaders: [
{ test: /\.jade$/, loader: 'jade-loader' }, { test: /\.json$/, loader: 'json-loader' },
…
]
}
Loaders - file-loader
{
test: /\.(png|jp?g|gif)$/i, loader: 'file?name=[name].[hash].[ext]'
}
logo.png => logo.c21c79decca12.png
Loaders - style-loader
{
test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
}
Plugins
Plugins - что это?
• apply
• compiler
• compilation
Plugins - main sources
• Compiler
• Compilation
Plugins - Compiler
• Сконфигурированная среда webpack
• Доступ к этапам компиляции
Plugins - Compiler
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;
Plugins - interface types
run compile compilation emit done
load modules
optimize modules
optimize chunks
hashed
Plugins - Compilation
• Single build
Plugins - Compilation
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
Задача
Задача - требования
• Минификация svg
• Сборка нескольких спрайтов
• Добавление собранных спрайтов в манифест
Manifest.json
“app.css": “e387d110eeab67b8s1r.app.css",
“app.js”: "809f329c512f0b75a7f.app.js",
Задача - svg спрайты
• Создание спрайта
• Добавление в compilation.assets
compiler.plugin('emit', function(compilation, callback) {
compilation.assets[mySpriteName] = { source: function() { return source; }, size: function() { return source.length; } };
callback();});
Задача - svgstore
Вывод
• Изучение возможностей инструмента
• Поиск решения
• Возможные варианты реализации
Заключение
• Webpack
• Изучаем документацию
• Ставим pull requests
• Делаем вклад в OpenSource
Спасибо за внимание!Вопросы?
https://github.com/lgordey
http://lgordey.github.io/