Upload
yaroslav-serhieiev
View
1.091
Download
2
Embed Size (px)
Citation preview
сделал меня счастливей
WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015YAROSLAV SERHIEIEV, 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 СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
СОБИРАЕМ ПО ОЛД-СКУЛУ
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
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ТЕ ЖЕ КОМАНДЫ, ТОЛЬКО В ПРОФИЛЬ :}> ЧЕРЕЗ 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']);
};
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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
HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
[babel-loader] => .js, .map
HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html[babel-loader] => .js, .map
HomePage.jsx
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ContactsPage.jsx
ES6
HTMLindex.html
HTMLcontacts.html[babel-loader] => .js, .map
StaticSiteGeneratorPlugin
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ES6
ES6
HTMLindex.html
HTMLcontacts.html
HomePage.jsx
ContactsPage.jsx
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
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
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
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
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
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
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
page2.css
site.css
placeholder.png
Roboto.ttf
Roboto.woff
page1.less
unused.png
КАК ВЫГЛЯДИТ ПРОСТЕЙШАЯ КОНФИГУРАЦИЯ В ИТОГЕ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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 ЗАГРУЗЧИК
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
plugins: [ new HtmlWebpackPlugin({ template: path.join(src, 'index.html'), inject: 'body', }) ] };
HTML-ПЛАГИН
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
КАК 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
ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
System.import(‘./locales/‘ + lang).then(locale => /* … */);
ОПТОВЫЙ REQUIRE
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
System.import(‘./locales/‘ + lang).then(locale => /* … */);
▸ 0.0.js
▸ 1.0.js
▸ 2.0.js…
ОПТОВЫЙ 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…
ОПТОВЫЙ 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]
ОПТОВЫЙ 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
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
JAVASCRIPT - ЭТО
ВАМ НЕ
ЭТО
(C)
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
BUILD PIPELINE
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
BUILD PIPELINEplugins
dependency analysis
ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
JS CSS PNG
JS JS JS
loaders
HTML JS PNG CSSBUILD PIPELINEplugins
КАК БИНАРНИКИ ПРЕВРАЩАЮТСЯ В 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;
}
};
BASE64 URL OR…?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."
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"
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
test: /\.png$/
… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
URL-LOADER* limit = 8000
* name = [path][hash].[ext]
test: /\.png$/
… И ЭТО БЫЛА СХЕМА РАБОТЫ 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$/
… И ЭТО БЫЛА СХЕМА РАБОТЫ 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$/
… И ЭТО БЫЛА СХЕМА РАБОТЫ 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$/
… И ЭТО БЫЛА СХЕМА РАБОТЫ 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$/
КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ
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
КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ
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
ПИШЕМ ASCII ART LOADER
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ПОДКЛЮЧЕНИЕ ASCII
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
pre.innerHTML = require(‘asciiart?color=1!./cute-little-cat.png');
ПОДКЛЮЧЕНИЕ 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');
ПОДКЛЮЧЕНИЕ 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');
В ИТОГЕ ОН НАМ ВЕРНЕТ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
В ИТОГЕ ОН НАМ ВЕРНЕТ?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
module.exports ="<b class="ansi-0">;</b> <b class="ansi-1">@</b>...";
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
КОМУ ТАКОЕ НАДО?
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
И ВСЕ-ТАКИ ПОЛУЧИЛОСЬ МИЛО
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
HOT MODULE REPLACEMENT
[ WITHOUT REACT.JS + REDUX]
ДЛЯ ЭТОГО ПОНАДОБИТСЯ WEBPACK-DEV-SERVER
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
KIT CAT CLOCK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
KIT CAT CLOCK
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
TEXT
ЧУДА НЕТ. РАСХОДИМСЯ :)
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();
ЧУДА НЕТ. РАСХОДИМСЯ :)
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
ЧУДА НЕТ. РАСХОДИМСЯ :)
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();
ЧУДА НЕТ. РАСХОДИМСЯ :)
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();
КАК УБРАТЬ ПОБОЧНЫЙ ЭФФЕКТ?
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); // убираем побочный эффект
});
}
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
import { defaults } from 'lodash';
export function kharkiv(conference) {
return defaults(conference, { city: 'Kharkiv' });
}
TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
import { defaults } from 'lodash';
export function kharkiv(conference) {
return defaults(conference, { city: 'Kharkiv' });
}
TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)
▸ StealJS**** (2014-)
ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД
▸ Google Closure Compiler(2009-)*
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
▸ Browserify** (2010-)
▸ Webpack (2012-)
▸ JSPM*** (2013-)
▸ StealJS**** (2014-)
▸ Rollup.js (2015-)
WEBPACK РАСКРЫВАЕТ СВОЙ ПОТЕНЦИАЛ
▸ React.js
▸ React.js + Redux
▸ Проекты с React-like библиотеками
▸ Проекты 90+% ФП ??
▸ Самопальные Vanilla.js проекты (пишем HMR вручную)
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
WEBPACK МОЖЕТ
▸ Заменить собой на несложном проекте Gulp, Grunt
▸ Компилировать из очень многих распространенных форматов
▸ Ставить строгие зависимости между всеми файлами в приложении
▸ Подгружать части проекта асинхронно
▸ Выделять vendor bundle, common bundle, склеивать bundles
▸ Генерировать CSS, HTML файлы, несмотря на то что все модули — JS
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
ЧЕГО ЛУЧШЕ НЕ ДЕЛАТЬ С WEBPACK
▸ Ставить вместе с ним Babel 6
▸ Использовать 2.0.0-beta прямо сейчас
▸ Таргетить сервер-сайд (библиотеки под node.js )
▸ Создавать сайты с минимальным количеством JS
▸ Приложения, где нужно слишком много динамических require()
▸ Искать документацию про написание плагинов
KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ
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 - просто стоит почитать он их
СПАСИБО ЗА ВНИМАНИЕ… И НЕВОШЕДШЕЕ В ПРЕЗЕНТАЦИЮ