Как Webpack сделал меня счастливее

сделал меня счастливей
WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015
YAROSLAV SERHIEIEV, WIX.COM

КАК Я НАЧИНАЛ
СВОИ ХОББИ-ПРОЕКТЫ

НА ПОЛПУТИ К ЦЕЛИ
НАЧИНАЛСЯ НУРЕ

а новых технологий-то хочется…

REQUIRE.JS
SystemJS
namespaces?

.JSX
REQUIRE.JS
SystemJS
namespaces?

source
maps
live
reload
.JSX
tests
REQUIRE.JS
SystemJS
namespaces?
???
minify
lazy load

СЛОЖНО УВЯЗАТЬ МЕЖДУ СОБОЙ
.CSS
source
maps
RUNNER .JS MODULES
live
reload
.JSX
tests
REQUIRE.JS
namespaces?
MISC
???
minify
R.JS

МОЙ ЭНТУЗИАЗМ ПОСЛЕ
НАСТРОЙКИ БИЛДА

ЧТО ИЗМЕНИЛ ДЛЯ МЕНЯ
WEBPACK?

▸ index.html
▸ index.debug.html
▸ bundle.css
▸ bundle.min.css
▸ bundle.js
▸ bundle.min.js
▸ img/logo.png
▸ fonts/…
РЕЗУЛЬТАТ СБОРКИ (DIST) ПРОСТОГО SINGLE PAGE APPLICATION
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

СОБИРАЕМ ПО ОЛД-СКУЛУ

СОБИРАЕМ ПО ОЛД-СКУЛУ
▸ rm -rf dist; mkdir dist
▸ cat src/common.js src/page1.js src/page2.js > dist/bundle.js
▸ uglify dist/bundle.js > dist/bundle.min.js
▸ cat src/common.css src/page1.css src/page2.css > dist/
bundle.css
▸ cssmin dist/bundle.css > dist/bundle.min.css
▸ cp src/img dist/img
▸ cp src/font dist/font

ТЕ ЖЕ КОМАНДЫ, ТОЛЬКО В ПРОФИЛЬ :}> ЧЕРЕЗ GRUNTFILE.JS
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
}); });
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['jshint', 'qunit']);
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};

▸ js
▸ css
▸ png
▸ woff
▸ txt
▸ xml
▸ hbs
▸ jsx
▸ ES6
▸ jpg
▸ ROBOTS.TXT
▸ html
▸ coffee
▸ typescript
▸ whatever
ВСЕ ОНИ — FIRST CLASS CITIZENS

HomePage.jsx
ES6
ContactsPage.jsx
ES6

HomePage.jsx
ES6
ContactsPage.jsx
ES6
[babel-loader] => .js, .map

HomePage.jsx
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html

HomePage.jsx
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html
StaticSiteGeneratorPlugin

ES6
ES6
HTMLindex.html
HTMLcontacts.html
HomePage.jsx
ContactsPage.jsx

ES6
JSX
JSX
JSX
JSX
JSX
A.jsx
B.jsx
C.jsx
D.jsx
E.jsx
ES6
HTMLindex.html
HTMLcontacts.html
HomePage.jsx
ContactsPage.jsx

ES6
JSX
JSX
JSX
JSX
JSX
A.jsx
B.jsx
C.jsx
D.jsx
E.jsx
ES6
CommonsChunkPlugin
HTMLindex.html
HTMLcontacts.html
HomePage.jsx
ContactsPage.jsx

ES6
JSX
JSX
JSX
JSX
JSX
A.jsx
B.jsx
C.jsx
D.jsx
E.jsx
ES6
page1.less
page2.css
CommonsChunkPlugin
HTMLindex.html
HTMLcontacts.html
HomePage.jsx
ContactsPage.jsx

ES6
JSX
JSX
JSX
JSX
JSX
A.jsx
B.jsx
C.jsx
D.jsx
E.jsx
ES6
page1.less
page2.css
CommonsChunkPluginAggressiveMergingPlugin
HTMLindex.html
HTMLcontacts.html
HomePage.jsx
ContactsPage.jsx

page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less

page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
unused.png

КАК ВЫГЛЯДИТ ПРОСТЕЙШАЯ КОНФИГУРАЦИЯ В ИТОГЕ
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: "./app.js",
output: {
path: './dist',
filename: '[name].js'
}
};

module: {
loaders: [{
test: /.js$/,
loader: ‘babel-loader',
include: path.resolve(__dirname, 'src'),
}],
},
};
ES6 ЗАГРУЗЧИК

plugins: [
new HtmlWebpackPlugin({
template: path.join(src, 'index.html'),
inject: 'body',
})
]
};
HTML-ПЛАГИН

КАК REQUIRE’ИТЬ В WEBPACK?
Notation Sync (per ﬁle) Async (per ﬁle) Sync (mask) Async (mask)
CJS require(module) require.ensure
require(expr) 
require.context
N/A
AMD define([modules]) require([modules]) N/A N/A
ES6/S.JS import
System.import 
(module)
N/A
System.import 
(expr)
нестандартные функции Webpack доступно в 2.0.0-beta

ОПТОВЫЙ REQUIRE
System.import(‘./locales/‘ + lang).then(locale => /* … */);

▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…

var locale = require(‘./locales/‘ + lang);
var locale = require.context(‘./locales’, true, /.js$/);
▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…

▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…
▸ main.bundle.js <- [all locales]

▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…
▸ main.bundle.js <- [all locales]
ContextReplacementPlugin

ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
JS CSS PNG

JS CSS PNG
JS JS JS
loaders

dependency
analysis
JS CSS PNG
JS JS JS
loaders

dependency
analysis
JS CSS PNG
JS JS JS
loaders
JAVASCRIPT - ЭТО
ВАМ НЕ ЭТО
(C)

dependency
analysis
JS CSS PNG
JS JS JS
loaders
BUILD PIPELINE

dependency
analysis
JS CSS PNG
JS JS JS
loaders
BUILD PIPELINEplugins

dependency
analysis
JS CSS PNG
JS JS JS
loaders
HTML
JS
PNG
CSSBUILD PIPELINEplugins

КАК БИНАРНИКИ ПРЕВРАЩАЮТСЯ В JAVASCRIPT-МОДУЛИ ?
var placeholderImage = require('assets/images/placeholder.png');
module.exports = {
createSafeImage: function (src) {
var img = document.createElement('img');
img.src = src || placeholderImage;
return img;
}
};

BASE64 URL OR…?
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."

BASE64 URL OR…?
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."
"assets/images/placeholder.png"
"assets/placeholder.png?787efa438c612b89f46a812"
"assets/787efa438c612b89f46a812.png"

… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK

test: /.png$/

URL-LOADER
* limit = 8000
* name = [path][hash].[ext]
test: /.png$/

var placeholderImage =
require('assets/images/placeholder.png');URL-LOADER
* limit = 8000
test: /.png$/

require('assets/images/placeholder.png');
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEU
URL-LOADER
* limit = 8000
test: /.png$/

module.exports =
URL-LOADER
* limit = 8000
FILE-LOADER
* name = 
[path][hash].[ext]
test: /.png$/

module.exports =
module.exports =
"assets/images/787efa438c612b89f46a812.png";
URL-LOADER
* limit = 8000
FILE-LOADER
* name = 
[path][hash].[ext]
test: /.png$/

КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ
0
1 1
SCSS
CSS SOURCE MAP
2 2CSS 
AUTOPREFIXED
SOURCE MAP
3JS 3 SOURCE MAP
SASS-LOADER
AUTOPREFIXER-LOADER
CSS-LOADER
STYLE-LOADER

КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ
0
1 1
SCSS
CSS SOURCE MAP
2 2CSS 
AUTOPREFIXED
SOURCE MAP
3JS 3 SOURCE MAP
SASS-LOADER
AUTOPREFIXER-LOADER
CSS-LOADER
STYLE-LOADER
ExtractTextPlugin

ПИШЕМ ASCII ART LOADER

ПОДКЛЮЧЕНИЕ ASCII
pre.innerHTML = require(‘asciiart?color=1!./cute-
little-cat.png');

module: {
loaders: [
{
test: /ASCII_REGEX/,
loader: ‘asciiart-loader?color=1’
}
]
little-cat.png');

module: {
loaders: [
{
test: /ASCII_REGEX/,
loader: ‘asciiart-loader?color=1’
}
]
little-cat.png');
require('images/ascii/cute-little-cat.png');

В ИТОГЕ ОН НАМ ВЕРНЕТ?

В ИТОГЕ ОН НАМ ВЕРНЕТ?
module.exports = 
"<b class="ansi-0">;</b> 
<b class="ansi-1">@</b>...";

КОМУ ТАКОЕ НАДО?

И ВСЕ-ТАКИ ПОЛУЧИЛОСЬ МИЛО

HOT MODULE REPLACEMENT
[ WITHOUT REACT.JS + REDUX]

ДЛЯ ЭТОГО ПОНАДОБИТСЯ WEBPACK-DEV-SERVER

KIT CAT CLOCK

ЧУДА НЕТ. РАСХОДИМСЯ :)
function injectRootElement() {
var input = document.createElement('input');
input.placeholder = "App Started"; // -> File Changed
document.body.appendChild(input);
return input;
}
var input = injectRootElement();

input.placeholder = "App Started"; // -> File Changed
return input;
}
APP STARTED

APP STARTED
input.placeholder = “File Changed”;
return input;
}

APP STARTED
FILE CHANGED
input.placeholder = “File Changed”;
return input;
}

КАК УБРАТЬ ПОБОЧНЫЙ ЭФФЕКТ?
if (module.hot) { // если включен режим HMR
module.hot.accept(); // разрешить замену данного модуля
// событие перед загрузкой новой версии модуля
module.hot.dispose(function (data) {
document.body.removeChild(input); // убираем побочный эффект
});

import { defaults } from 'lodash';
export function kharkiv(conference) {
return defaults(conference, { city: 'Kharkiv' });
}
TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ

ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД

▸ Google Closure Compiler 
(2009-)*

(2009-)*
▸ Browserify** (2010-)

(2009-)*
▸ Webpack (2012-)

(2009-)*
▸ Webpack (2012-)
▸ JSPM*** (2013-)

(2009-)*
▸ Webpack (2012-)
▸ JSPM*** (2013-)
▸ StealJS**** (2014-)

(2009-)*
▸ Webpack (2012-)
▸ JSPM*** (2013-)
▸ StealJS**** (2014-)
▸ Rollup.js (2015-)

WEBPACK РАСКРЫВАЕТ СВОЙ ПОТЕНЦИАЛ
▸ React.js
▸ React.js + Redux
▸ Проекты с React-like библиотеками
▸ Проекты 90+% ФП ??
▸ Самопальные Vanilla.js проекты (пишем HMR вручную)

WEBPACK МОЖЕТ
▸ Заменить собой на несложном проекте Gulp, Grunt
▸ Компилировать из очень многих распространенных форматов
▸ Ставить строгие зависимости между всеми файлами в приложении
▸ Подгружать части проекта асинхронно
▸ Выделять vendor bundle, common bundle, склеивать bundles
▸ Генерировать CSS, HTML файлы, несмотря на то что все модули — JS

ЧЕГО ЛУЧШЕ НЕ ДЕЛАТЬ С WEBPACK
▸ Ставить вместе с ним Babel 6
▸ Использовать 2.0.0-beta прямо сейчас
▸ Таргетить сервер-сайд (библиотеки под node.js )
▸ Создавать сайты с минимальным количеством JS
▸ Приложения, где нужно слишком много динамических require()
▸ Искать документацию про написание плагинов

▸ https://webpack.github.io/analyse
▸ https://github.com/noomorph/asciiart-loader
▸ http://y2u.be/xsSnOQynTHs - 
Dan Abramov: Live React: Hot Reloading with Time
Travel
▸ HTTP2, System.import, JSPM - просто стоит почитать
он их
СПАСИБО ЗА ВНИМАНИЕ… И НЕВОШЕДШЕЕ В ПРЕЗЕНТАЦИЮ

Как Webpack сделал меня счастливее

More Related Content

Как Webpack сделал меня счастливее