Как webpack сделал меня счастливее
TRANSCRIPT
![Page 1: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/1.jpg)
сделал меня счастливей
WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015YAROSLAV SERHIEIEV, WIX.COM
![Page 2: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/2.jpg)
КАК Я НАЧИНАЛ СВОИ ХОББИ-ПРОЕКТЫ
![Page 3: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/3.jpg)
![Page 4: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/4.jpg)
НА ПОЛПУТИ К ЦЕЛИ НАЧИНАЛСЯ НУРЕ
![Page 5: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/5.jpg)
а новых технологий-то хочется…
![Page 6: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/6.jpg)
а новых технологий-то хочется…
![Page 7: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/7.jpg)
а новых технологий-то хочется…
![Page 8: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/8.jpg)
REQUIRE.JS
SystemJSnamespaces?
а новых технологий-то хочется…
![Page 9: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/9.jpg)
.JSX
REQUIRE.JS
SystemJSnamespaces?
а новых технологий-то хочется…
![Page 10: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/10.jpg)
source maps
live reload
.JSX
tests
REQUIRE.JS
SystemJSnamespaces?
???
minifylazy load
а новых технологий-то хочется…
![Page 11: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/11.jpg)
СЛОЖНО УВЯЗАТЬ МЕЖДУ СОБОЙ
.CSS
source maps
RUNNER .JS MODULES
live reload
.JSX
tests
REQUIRE.JS
namespaces?
MISC
???
minify
R.JS
![Page 12: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/12.jpg)
![Page 13: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/13.jpg)
МОЙ ЭНТУЗИАЗМ ПОСЛЕ НАСТРОЙКИ БИЛДА
![Page 14: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/14.jpg)
![Page 15: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/15.jpg)
ЧТО ИЗМЕНИЛ ДЛЯ МЕНЯ WEBPACK?
![Page 16: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/16.jpg)
▸ 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 СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 17: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/17.jpg)
СОБИРАЕМ ПО ОЛД-СКУЛУ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 18: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/18.jpg)
СОБИРАЕМ ПО ОЛД-СКУЛУ▸ 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
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 19: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/19.jpg)
ТЕ ЖЕ КОМАНДЫ, ТОЛЬКО В ПРОФИЛЬ :}> ЧЕРЕЗ GRUNTFILE.JS
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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']);
};
![Page 20: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/20.jpg)
![Page 21: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/21.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 22: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/22.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 23: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/23.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ js
▸ css
▸ png
▸ woff
▸ txt
▸ xml
▸ hbs
▸ jsx
▸ ES6
▸ jpg
▸ ROBOTS.TXT
▸ html
▸ coffee
▸ typescript
▸ whatever
ВСЕ ОНИ — FIRST CLASS CITIZENS
![Page 24: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/24.jpg)
HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
![Page 25: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/25.jpg)
HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
[babel-loader] => .js, .map
![Page 26: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/26.jpg)
HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html[babel-loader] => .js, .map
![Page 27: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/27.jpg)
HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html[babel-loader] => .js, .map
StaticSiteGeneratorPlugin
![Page 28: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/28.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ES6
HTMLindex.html
HTMLcontacts.html
HomePage.jsx
ContactsPage.jsx
![Page 29: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/29.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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
![Page 30: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/30.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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
![Page 31: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/31.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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
![Page 32: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/32.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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
![Page 33: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/33.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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
![Page 34: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/34.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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
![Page 35: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/35.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
![Page 36: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/36.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
![Page 37: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/37.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
![Page 38: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/38.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
unused.png
![Page 39: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/39.jpg)
КАК ВЫГЛЯДИТ ПРОСТЕЙШАЯ КОНФИГУРАЦИЯ В ИТОГЕ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports = { context: path.resolve(__dirname, 'src'), entry: "./app.js", output: { path: './dist', filename: '[name].js' } };
![Page 40: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/40.jpg)
module: { loaders: [{ test: /\.js$/, loader: ‘babel-loader', include: path.resolve(__dirname, 'src'), }], }, };
ES6 ЗАГРУЗЧИК
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 41: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/41.jpg)
plugins: [ new HtmlWebpackPlugin({ template: path.join(src, 'index.html'), inject: 'body', }) ] };
HTML-ПЛАГИН
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 42: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/42.jpg)
КАК REQUIRE’ИТЬ В WEBPACK?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК 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
![Page 43: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/43.jpg)
ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
System.import(‘./locales/‘ + lang).then(locale => /* … */);
![Page 44: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/44.jpg)
ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
System.import(‘./locales/‘ + lang).then(locale => /* … */);
▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…
![Page 45: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/45.jpg)
ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var locale = require(‘./locales/‘ + lang);
var locale = require.context(‘./locales’, true, /\.js$/);
System.import(‘./locales/‘ + lang).then(locale => /* … */);
▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…
![Page 46: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/46.jpg)
ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var locale = require(‘./locales/‘ + lang);
var locale = require.context(‘./locales’, true, /\.js$/);
System.import(‘./locales/‘ + lang).then(locale => /* … */);
▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…
▸ main.bundle.js <- [all locales]
![Page 47: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/47.jpg)
ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var locale = require(‘./locales/‘ + lang);
var locale = require.context(‘./locales’, true, /\.js$/);
System.import(‘./locales/‘ + lang).then(locale => /* … */);
▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…
▸ main.bundle.js <- [all locales]
ContextReplacementPlugin
![Page 48: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/48.jpg)
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
![Page 49: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/49.jpg)
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
![Page 50: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/50.jpg)
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
![Page 51: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/51.jpg)
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
JAVASCRIPT - ЭТО
ВАМ НЕ
ЭТО
(C)
![Page 52: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/52.jpg)
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
![Page 53: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/53.jpg)
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
BUILD PIPELINE
![Page 54: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/54.jpg)
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
BUILD PIPELINEplugins
![Page 55: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/55.jpg)
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
HTML JS PNG CSSBUILD PIPELINEplugins
![Page 56: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/56.jpg)
КАК БИНАРНИКИ ПРЕВРАЩАЮТСЯ В JAVASCRIPT-МОДУЛИ ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var placeholderImage = require('assets/images/placeholder.png');
module.exports = {
createSafeImage: function (src) {
var img = document.createElement('img');
img.src = src || placeholderImage;
return img;
}
};
![Page 57: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/57.jpg)
BASE64 URL OR…?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."
![Page 58: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/58.jpg)
BASE64 URL OR…?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."
"assets/images/placeholder.png"
"assets/placeholder.png?787efa438c612b89f46a812"
"assets/787efa438c612b89f46a812.png"
![Page 59: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/59.jpg)
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 60: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/60.jpg)
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
test: /\.png$/
![Page 61: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/61.jpg)
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
URL-LOADER* limit = 8000
* name = [path][hash].[ext]
test: /\.png$/
![Page 62: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/62.jpg)
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var placeholderImage =
require('assets/images/placeholder.png');URL-LOADER* limit = 8000
* name = [path][hash].[ext]
test: /\.png$/
![Page 63: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/63.jpg)
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var placeholderImage =
require('assets/images/placeholder.png');
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."
URL-LOADER* limit = 8000
* name = [path][hash].[ext]
test: /\.png$/
![Page 64: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/64.jpg)
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var placeholderImage =
require('assets/images/placeholder.png');
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."
URL-LOADER* limit = 8000
* name = [path][hash].[ext]
FILE-LOADER* name =[path][hash].[ext]
test: /\.png$/
![Page 65: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/65.jpg)
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var placeholderImage =
require('assets/images/placeholder.png');
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."
module.exports =
"assets/images/787efa438c612b89f46a812.png";
URL-LOADER* limit = 8000
* name = [path][hash].[ext]
FILE-LOADER* name =[path][hash].[ext]
test: /\.png$/
![Page 66: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/66.jpg)
КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
0
1 1
SCSS
CSS SOURCE MAP
2 2CSSAUTOPREFIXED
SOURCE MAP
3JS 3 SOURCE MAP
SASS-LOADER
AUTOPREFIXER-LOADER
CSS-LOADER
STYLE-LOADER
![Page 67: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/67.jpg)
КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
0
1 1
SCSS
CSS SOURCE MAP
2 2CSSAUTOPREFIXED
SOURCE MAP
3JS 3 SOURCE MAP
SASS-LOADER
AUTOPREFIXER-LOADER
CSS-LOADER
STYLE-LOADER
ExtractTextPlugin
![Page 68: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/68.jpg)
ПИШЕМ ASCII ART LOADER
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 69: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/69.jpg)
ПОДКЛЮЧЕНИЕ ASCII
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
pre.innerHTML = require(‘asciiart?color=1!./cute-little-cat.png');
![Page 70: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/70.jpg)
ПОДКЛЮЧЕНИЕ ASCII
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module: { loaders: [ { test: /ASCII_REGEX/, loader: ‘asciiart-loader?color=1’ }
]
pre.innerHTML = require(‘asciiart?color=1!./cute-little-cat.png');
![Page 71: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/71.jpg)
ПОДКЛЮЧЕНИЕ ASCII
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module: { loaders: [ { test: /ASCII_REGEX/, loader: ‘asciiart-loader?color=1’ }
]
pre.innerHTML = require(‘asciiart?color=1!./cute-little-cat.png');
require('images/ascii/cute-little-cat.png');
![Page 72: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/72.jpg)
В ИТОГЕ ОН НАМ ВЕРНЕТ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 73: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/73.jpg)
В ИТОГЕ ОН НАМ ВЕРНЕТ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports ="<b class="ansi-0">;</b> <b class="ansi-1">@</b>...";
![Page 74: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/74.jpg)
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 75: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/75.jpg)
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 76: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/76.jpg)
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 77: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/77.jpg)
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 78: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/78.jpg)
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 79: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/79.jpg)
![Page 80: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/80.jpg)
И ВСЕ-ТАКИ ПОЛУЧИЛОСЬ МИЛО
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 81: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/81.jpg)
HOT MODULE REPLACEMENT
[ WITHOUT REACT.JS + REDUX]
![Page 82: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/82.jpg)
ДЛЯ ЭТОГО ПОНАДОБИТСЯ WEBPACK-DEV-SERVER
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 83: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/83.jpg)
KIT CAT CLOCK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 84: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/84.jpg)
KIT CAT CLOCK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 85: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/85.jpg)
TEXT
![Page 86: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/86.jpg)
![Page 87: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/87.jpg)
![Page 88: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/88.jpg)
ЧУДА НЕТ. РАСХОДИМСЯ :)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
function injectRootElement() {
var input = document.createElement('input');
input.placeholder = "App Started"; // -> File Changed
document.body.appendChild(input);
return input;
}
var input = injectRootElement();
![Page 89: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/89.jpg)
ЧУДА НЕТ. РАСХОДИМСЯ :)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
function injectRootElement() {
var input = document.createElement('input');
input.placeholder = "App Started"; // -> File Changed
document.body.appendChild(input);
return input;
}
var input = injectRootElement();
APP STARTED
![Page 90: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/90.jpg)
ЧУДА НЕТ. РАСХОДИМСЯ :)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
APP STARTED
function injectRootElement() {
var input = document.createElement('input');
input.placeholder = “File Changed”;
document.body.appendChild(input);
return input;
}
var input = injectRootElement();
![Page 91: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/91.jpg)
ЧУДА НЕТ. РАСХОДИМСЯ :)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
APP STARTED
FILE CHANGEDfunction injectRootElement() {
var input = document.createElement('input');
input.placeholder = “File Changed”;
document.body.appendChild(input);
return input;
}
var input = injectRootElement();
![Page 92: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/92.jpg)
КАК УБРАТЬ ПОБОЧНЫЙ ЭФФЕКТ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var input = injectRootElement();
if (module.hot) { // если включен режим HMR
module.hot.accept(); // разрешить замену данного модуля
// событие перед загрузкой новой версии модуля
module.hot.dispose(function (data) {
document.body.removeChild(input); // убираем побочный эффект
});
}
![Page 93: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/93.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 94: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/94.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
import { defaults } from 'lodash';
export function kharkiv(conference) {
return defaults(conference, { city: 'Kharkiv' });
}
TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ
![Page 95: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/95.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
import { defaults } from 'lodash';
export function kharkiv(conference) {
return defaults(conference, { city: 'Kharkiv' });
}
TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ
![Page 96: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/96.jpg)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 97: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/97.jpg)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 98: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/98.jpg)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
![Page 99: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/99.jpg)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
![Page 100: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/100.jpg)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)
![Page 101: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/101.jpg)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)
▸ StealJS**** (2014-)
![Page 102: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/102.jpg)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)
▸ StealJS**** (2014-)
▸ Rollup.js (2015-)
![Page 103: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/103.jpg)
WEBPACK РАСКРЫВАЕТ СВОЙ ПОТЕНЦИАЛ
▸ React.js
▸ React.js + Redux
▸ Проекты с React-like библиотеками
▸ Проекты 90+% ФП ??
▸ Самопальные Vanilla.js проекты (пишем HMR вручную)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 104: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/104.jpg)
WEBPACK МОЖЕТ
▸ Заменить собой на несложном проекте Gulp, Grunt
▸ Компилировать из очень многих распространенных форматов
▸ Ставить строгие зависимости между всеми файлами в приложении
▸ Подгружать части проекта асинхронно
▸ Выделять vendor bundle, common bundle, склеивать bundles
▸ Генерировать CSS, HTML файлы, несмотря на то что все модули — JS
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 105: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/105.jpg)
ЧЕГО ЛУЧШЕ НЕ ДЕЛАТЬ С WEBPACK
▸ Ставить вместе с ним Babel 6
▸ Использовать 2.0.0-beta прямо сейчас
▸ Таргетить сервер-сайд (библиотеки под node.js )
▸ Создавать сайты с минимальным количеством JS
▸ Приложения, где нужно слишком много динамических require()
▸ Искать документацию про написание плагинов
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
![Page 106: Как Webpack сделал меня счастливее](https://reader034.vdocuments.net/reader034/viewer/2022052405/58f220881a28ab54498b45b5/html5/thumbnails/106.jpg)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ 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 - просто стоит почитать он их
СПАСИБО ЗА ВНИМАНИЕ… И НЕВОШЕДШЕЕ В ПРЕЗЕНТАЦИЮ