MoscowJS 26 webpack presentation

Немного черной магии webpack и разоблачений

Левченко ГордейИнженер-разработчик клиентских приложений

Rambler&Co

[email protected]

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

Спасибо за внимание!Вопросы?

[email protected]

https://github.com/lgordey

http://lgordey.github.io/