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

сделал меня счастливей

WEBPACK

KHARKIV.JS, 8 NOVEMBER 2015YAROSLAV SERHIEIEV, WIX.COM

http://wix.COM

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

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

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



REQUIRE.JS

SystemJSnamespaces?


.JSX

REQUIRE.JS

SystemJSnamespaces?


source maps

live reload

.JSX

tests

REQUIRE.JS

SystemJSnamespaces?

???

minifylazy 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[babel-loader] => .js, .map

HomePage.jsx


ES6

ContactsPage.jsx

ES6

HTMLindex.html

HTMLcontacts.html[babel-loader] => .js, .map

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

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


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 file) Async (per file) Sync (mask) Async (mask)

CJS require(module) require.ensurerequire(expr)require.context

N/A

AMD define([modules]) require([modules]) N/A N/A

ES6/S.JS importSystem.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

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 =


"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 =




test: /\.png$/





module.exports =




FILE-LOADER* name =[path][hash].[ext]

test: /\.png$/





module.exports =


module.exports =

"assets/images/787efa438c612b89f46a812.png";



FILE-LOADER* name =[path][hash].[ext]

test: /\.png$/

КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ


0

1 1

SCSS

CSS SOURCE MAP

2 2CSSAUTOPREFIXED

SOURCE MAP

3JS 3 SOURCE MAP

SASS-LOADER

AUTOPREFIXER-LOADER

CSS-LOADER

STYLE-LOADER

КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ


0

1 1

SCSS

CSS SOURCE MAP

2 2CSSAUTOPREFIXED

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’ }

]




module: { loaders: [ { test: /ASCII_REGEX/, loader: ‘asciiart-loader?color=1’ }

]


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


KIT CAT CLOCK


TEXT

ЧУДА НЕТ. РАСХОДИМСЯ :)


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 CHANGEDfunction injectRootElement() {


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 СТАЛ ЕЩЕ УМНЕЕ


import { defaults } from 'lodash';

export function kharkiv(conference) {

return defaults(conference, { city: 'Kharkiv' });

}

TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ

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



▸ Google Closure Compiler(2009-)*





▸ Browserify** (2010-)





▸ Webpack (2012-)





▸ Webpack (2012-)

▸ JSPM*** (2013-)





▸ Webpack (2012-)

▸ JSPM*** (2013-)

▸ StealJS**** (2014-)





▸ 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 сделал меня счастливее

Technology