#KharkivJS 2015, Харьков - Мои впечатления от Webpack. - Рассказ о его принципах работы. - Интересные фишки Webpack 1 и 2. - Что еще есть аналогичного и выводы.

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

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

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

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

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

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

8. REQUIRE.JS
SystemJS
namespaces?
а новых технологий-то хочется…

9. .JSX
REQUIRE.JS
SystemJS
namespaces?
а новых технологий-то хочется…

10. source
maps
live
reload
.JSX
tests
REQUIRE.JS
SystemJS
namespaces?
???
minify
lazy load
а новых технологий-то хочется…

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

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

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

16. ▸ 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 СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

17. СОБИРАЕМ ПО ОЛД-СКУЛУ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

18. СОБИРАЕМ ПО ОЛД-СКУЛУ
▸ 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 СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

19. ТЕ ЖЕ КОМАНДЫ, ТОЛЬКО В ПРОФИЛЬ :}> ЧЕРЕЗ 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']);
};

21. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

22. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

23. 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

24. HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6

25. HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
[babel-loader] => .js, .map

26. HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html
[babel-loader] => .js, .map

27. HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html
[babel-loader] => .js, .map
StaticSiteGeneratorPlugin

28. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ES6
HTMLindex.html
HTMLcontacts.html
HomePage.jsx
ContactsPage.jsx

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less

36. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less

37. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less

38. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
unused.png

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

40. module: {
loaders: [{
test: /.js$/,
loader: ‘babel-loader',
include: path.resolve(__dirname, 'src'),
}],
},
};
ES6 ЗАГРУЗЧИК
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

41. plugins: [
new HtmlWebpackPlugin({
template: path.join(src, 'index.html'),
inject: 'body',
})
]
};
HTML-ПЛАГИН
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

42. КАК REQUIRE’ИТЬ В WEBPACK?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
Notation Sync (per file) Async (per file) 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

43. ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
System.import(‘./locales/‘ + lang).then(locale => /* … */);

44. ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
System.import(‘./locales/‘ + lang).then(locale => /* … */);
▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…

45. ОПТОВЫЙ 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…

46. ОПТОВЫЙ 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]

47. ОПТОВЫЙ 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

48. ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG

49. ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders

50. dependency
analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders

51. dependency
analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
JAVASCRIPT - ЭТО
ВАМ НЕ ЭТО
(C)

52. dependency
analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders

53. dependency
analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
BUILD PIPELINE

54. dependency
analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
BUILD PIPELINEplugins

55. dependency
analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
HTML
JS
PNG
CSSBUILD PIPELINEplugins

56. КАК БИНАРНИКИ ПРЕВРАЩАЮТСЯ В 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;
}
};

57. BASE64 URL OR…?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."

58. 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"

59. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

60. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
test: /.png$/

61. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
URL-LOADER
* limit = 8000
* name = [path][hash].[ext]
test: /.png$/

62. … И ЭТО БЫЛА СХЕМА РАБОТЫ 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$/

63. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var placeholderImage =
require('assets/images/placeholder.png');
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEU
URL-LOADER
* limit = 8000
* name = [path][hash].[ext]
test: /.png$/

64. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var placeholderImage =
require('assets/images/placeholder.png');
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEU
URL-LOADER
* limit = 8000
* name = [path][hash].[ext]
FILE-LOADER
* name =
[path][hash].[ext]
test: /.png$/

65. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
var placeholderImage =
require('assets/images/placeholder.png');
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEU
module.exports =
"assets/images/787efa438c612b89f46a812.png";
URL-LOADER
* limit = 8000
* name = [path][hash].[ext]
FILE-LOADER
* name =
[path][hash].[ext]
test: /.png$/

66. КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
0
1 1
SCSS
CSS SOURCE MAP
2 2CSS
AUTOPREFIXED
SOURCE MAP
3JS 3 SOURCE MAP
SASS-LOADER
AUTOPREFIXER-LOADER
CSS-LOADER
STYLE-LOADER

67. КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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

68. ПИШЕМ ASCII ART LOADER
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

69. ПОДКЛЮЧЕНИЕ ASCII
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
pre.innerHTML = require(‘asciiart?color=1!./cute-
little-cat.png');

70. ПОДКЛЮЧЕНИЕ 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');

71. ПОДКЛЮЧЕНИЕ 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');

72. В ИТОГЕ ОН НАМ ВЕРНЕТ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

73. В ИТОГЕ ОН НАМ ВЕРНЕТ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports =
"<b class="ansi-0">;</b>
<b class="ansi-1">@</b>...";

74. КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

75. КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

76. КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

77. КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

78. КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

80. И ВСЕ-ТАКИ ПОЛУЧИЛОСЬ МИЛО
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

81. HOT MODULE REPLACEMENT
[ WITHOUT REACT.JS + REDUX]

82. ДЛЯ ЭТОГО ПОНАДОБИТСЯ WEBPACK-DEV-SERVER
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

83. KIT CAT CLOCK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

84. KIT CAT CLOCK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

85. TEXT

88. ЧУДА НЕТ. РАСХОДИМСЯ :)
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();

89. ЧУДА НЕТ. РАСХОДИМСЯ :)
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

90. ЧУДА НЕТ. РАСХОДИМСЯ :)
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();

91. ЧУДА НЕТ. РАСХОДИМСЯ :)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
APP STARTED
FILE CHANGED
function injectRootElement() {
var input = document.createElement('input');
input.placeholder = “File Changed”;
document.body.appendChild(input);
return input;
}
var input = injectRootElement();

92. КАК УБРАТЬ ПОБОЧНЫЙ ЭФФЕКТ?
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); // убираем побочный эффект
});

93. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

94. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
import { defaults } from 'lodash';
export function kharkiv(conference) {
return defaults(conference, { city: 'Kharkiv' });
}
TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ

95. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
import { defaults } from 'lodash';
export function kharkiv(conference) {
return defaults(conference, { city: 'Kharkiv' });
}
TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ

96. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

97. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler
(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

98. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler
(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)

99. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler
(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)

100. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler
(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)

101. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler
(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)
▸ StealJS**** (2014-)

102. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler
(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)
▸ StealJS**** (2014-)
▸ Rollup.js (2015-)

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

104. WEBPACK МОЖЕТ
▸ Заменить собой на несложном проекте Gulp, Grunt
▸ Компилировать из очень многих распространенных форматов
▸ Ставить строгие зависимости между всеми файлами в приложении
▸ Подгружать части проекта асинхронно
▸ Выделять vendor bundle, common bundle, склеивать bundles
▸ Генерировать CSS, HTML файлы, несмотря на то что все модули — JS
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

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

106. 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 - просто стоит почитать
он их
СПАСИБО ЗА ВНИМАНИЕ… И НЕВОШЕДШЕЕ В ПРЕЗЕНТАЦИЮ