Download as PDF, PPTX
![ТЕ ЖЕ КОМАНДЫ, ТОЛЬКО В ПРОФИЛЬ :}> ЧЕРЕЗ 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']);
};](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-19-320.jpg)
![HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
[babel-loader] => .js, .map](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-25-320.jpg)
![HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html
[babel-loader] => .js, .map](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-26-320.jpg)
![HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html
[babel-loader] => .js, .map
StaticSiteGeneratorPlugin](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-27-320.jpg)
![КАК ВЫГЛЯДИТ ПРОСТЕЙШАЯ КОНФИГУРАЦИЯ В ИТОГЕ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: "./app.js",
output: {
path: './dist',
filename: '[name].js'
}
};](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-39-320.jpg)
![module: {
loaders: [{
test: /.js$/,
loader: ‘babel-loader',
include: path.resolve(__dirname, 'src'),
}],
},
};
ES6 ЗАГРУЗЧИК
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-40-320.jpg)
![plugins: [
new HtmlWebpackPlugin({
template: path.join(src, 'index.html'),
inject: 'body',
})
]
};
HTML-ПЛАГИН
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-41-320.jpg)
![КАК 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](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-42-320.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]](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-46-320.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](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-47-320.jpg)
![… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
URL-LOADER
* limit = 8000
* name = [path][hash].[ext]
test: /.png$/](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-61-320.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$/](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-62-320.jpg)
![… И ЭТО БЫЛА СХЕМА РАБОТЫ 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$/](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-63-320.jpg)
![… И ЭТО БЫЛА СХЕМА РАБОТЫ 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$/](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-64-320.jpg)
![… И ЭТО БЫЛА СХЕМА РАБОТЫ 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$/](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-65-320.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');](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-70-320.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');](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-71-320.jpg)
![HOT MODULE REPLACEMENT
[ WITHOUT REACT.JS + REDUX]](https://image.slidesharecdn.com/webpack-151110155329-lva1-app6891/85/Webpack-81-320.jpg)
Uploaded byYaroslav Serhieiev
Как Webpack сделал меня счастливее
Документ описывает опыт автора, Ярослава Сергиева, в использовании Webpack для сборки проектов и улучшения рабочих процессов. В нём рассматриваются различные технологии и инструменты, такие как Babel, Grunt и загрузчики, а также примеры конфигураций и команд, использующихся в процессе разработки. Автор делится своим энтузиазмом и тем, как Webpack упростил его задачи при разработке приложений.
Как Webpack сделал меня счастливее
- 1. сделал меня счастливей WEBPACK KHARKIV.JS,8 NOVEMBER 2015 YAROSLAV SERHIEIEV, WIX.COM
- 2. КАК Я НАЧИНАЛ СВОИХОББИ-ПРОЕКТЫ
- 4. НА ПОЛПУТИ КЦЕЛИ НАЧИНАЛСЯ НУРЕ
- 5. а новых технологий-тохочется…
- 6. а новых технологий-тохочется…
- 7. а новых технологий-тохочется…
- 8.
- 9.
- 10.
- 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 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
- 22. KHARKIV.JS, 8 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
- 23. KHARKIV.JS, 8 NOVEMBER2015 :: КАК 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 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ContactsPage.jsx ES6
- 25. HomePage.jsx KHARKIV.JS, 8 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ContactsPage.jsx ES6 [babel-loader] => .js, .map
- 26. HomePage.jsx KHARKIV.JS, 8 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ContactsPage.jsx ES6 HTMLindex.html HTMLcontacts.html [babel-loader] => .js, .map
- 27. HomePage.jsx KHARKIV.JS, 8 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ContactsPage.jsx ES6 HTMLindex.html HTMLcontacts.html [babel-loader] => .js, .map StaticSiteGeneratorPlugin
- 28. KHARKIV.JS, 8 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ES6 HTMLindex.html HTMLcontacts.html HomePage.jsx ContactsPage.jsx
- 29. KHARKIV.JS, 8 NOVEMBER2015 :: КАК 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 NOVEMBER2015 :: КАК 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 NOVEMBER2015 :: КАК 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 NOVEMBER2015 :: КАК 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 NOVEMBER2015 :: КАК 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 NOVEMBER2015 :: КАК 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 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ page2.css site.css placeholder.png Roboto.ttf Roboto.woff page1.less
- 36. KHARKIV.JS, 8 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ page2.css site.css placeholder.png Roboto.ttf Roboto.woff page1.less
- 37. KHARKIV.JS, 8 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ page2.css site.css placeholder.png Roboto.ttf Roboto.woff page1.less
- 38. KHARKIV.JS, 8 NOVEMBER2015 :: КАК 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, 8NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ System.import(‘./locales/‘ + lang).then(locale => /* … */);
- 44. ОПТОВЫЙ REQUIRE KHARKIV.JS, 8NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ System.import(‘./locales/‘ + lang).then(locale => /* … */); ▸ 0.0.js ▸ 1.0.js ▸ 2.0.js…
- 45. ОПТОВЫЙ REQUIRE KHARKIV.JS, 8NOVEMBER 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, 8NOVEMBER 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, 8NOVEMBER 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, 8NOVEMBER 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, 8NOVEMBER 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 ARTLOADER KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
- 69. ПОДКЛЮЧЕНИЕ ASCII KHARKIV.JS, 8NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ pre.innerHTML = require(‘asciiart?color=1!./cute- little-cat.png');
- 70. ПОДКЛЮЧЕНИЕ ASCII KHARKIV.JS, 8NOVEMBER 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, 8NOVEMBER 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.
- 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 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
- 94. KHARKIV.JS, 8 NOVEMBER2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ import { defaults } from 'lodash'; export function kharkiv(conference) { return defaults(conference, { city: 'Kharkiv' }); } TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ
- 95. KHARKIV.JS, 8 NOVEMBER2015 :: КАК 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 NOVEMBER2015 :: КАК 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 - просто стоит почитать он их СПАСИБО ЗА ВНИМАНИЕ… И НЕВОШЕДШЕЕ В ПРЕЗЕНТАЦИЮ