Tweet
Tweet

Slide 1

Slide 1 text

Bundle webpack the web with Jeremy Fairbank @elpapapollo @jfairbank

Slide 2

Slide 2 text

sigient.com (pushagency.io) Your website, SimplyBuilt. simplybuilt.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

using System; using Foo.Bar; C# import java.lang.*; import Foo.Bar; Java #include #include C require 'json' require 'foo_bar' Ruby import Data.Maybe import Data.Sequence as Seq Haskell EXPLICIT

Slide 5

Slide 5 text

IMPLICIT

Slide 6

Slide 6 text

IMPLICIT var apiKey = _.get(globalData, 'api.key'); var date = moment(); var url = '/api/' + apiKey + '?' + Number(date); $.get(url).then(function(data) { var el = document.getElementById('main'); var app = React.createElement(FooBar, { data: data }); ReactDOM.render(app, el); });

Slide 7

Slide 7 text

lodash.js react.js redux.js react-dom.js jquery.js react-redux.js moment.js foo/bar.js app.js

Slide 8

Slide 8 text

EXPLICIT // AMD, require.js require(['react', 'foo/bar'], function(React, FooBar) { // ... }); // CommonJS, Node var React = require('react'); var FooBar = require('foo/bar'); // ES2015 import React from 'react'; import FooBar from 'foo/bar';

Slide 9

Slide 9 text

require define module.exports import export ? ? ? ? ?

Slide 10

Slide 10 text

webpack MODULE BUNDLER

Slide 11

Slide 11 text

require define module.exports import export

Slide 12

Slide 12 text

require define module.exports import export

Slide 13

Slide 13 text

require define module.exports import export bundle.js

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; const apiKey = getData('api.key'); const date = moment(); const url = `/api/${apiKey}?${Number(date)}`; $.get(url).then(data => { const el = document.getElementById('main'); const app = ; render(app, el); });

Slide 17

Slide 17 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data';

Slide 18

Slide 18 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data';

Slide 19

Slide 19 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data';

Slide 20

Slide 20 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main.js jquery react react-dom moment foo/bar util/data … … … … …

Slide 21

Slide 21 text

GETTING STARTED nodejs.org

Slide 22

Slide 22 text

$ npm install -g webpack $ webpack main.js bundle.js Install global binary

Slide 23

Slide 23 text

$ npm install -g webpack $ webpack main.js bundle.js Install global binary Entry file Output file

Slide 24

Slide 24 text

// main.js const leftPad = require('left-pad'); const createLogger = require('./modules/log'); const math = require('./modules/math'); const logger = createLogger(document.getElementById('log')); logger.log('29 =', leftPad(Number(29).toString(2), 8, 0)); logger.log('40 + 2 =', math.add(40, 2)); logger.log('10 x 2 =', math.multiply(10, 2)); Demo

Slide 25

Slide 25 text

CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, };

Slide 26

Slide 26 text

CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, };

Slide 27

Slide 27 text

CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, };

Slide 28

Slide 28 text

CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, };

Slide 29

Slide 29 text

CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, }; Demo

Slide 30

Slide 30 text

MODULE LOADERS ES2015

Slide 31

Slide 31 text

Preprocess (Module Loaders) Bundle import leftPad from 'left-pad'; import createLogger from './modules/log'; import * as math from './modules/math'; var _leftPad = require('left-pad'); var _log = require('./modules/log'); var _math = require('./modules/math');

Slide 32

Slide 32 text

Preprocess (Module Loaders) Bundle import leftPad from 'left-pad'; import createLogger from './modules/log'; import * as math from './modules/math'; var _leftPad = require('left-pad'); var _log = require('./modules/log'); var _math = require('./modules/math');

Slide 33

Slide 33 text

Preprocess (Module Loaders) Bundle import leftPad from 'left-pad'; import createLogger from './modules/log'; import * as math from './modules/math'; var _leftPad = require('left-pad'); var _log = require('./modules/log'); var _math = require('./modules/math');

Slide 34

Slide 34 text

$ npm install --save-dev \ babel-loader babel-core babel-preset-es2015

Slide 35

Slide 35 text

$ npm install --save-dev \ babel-loader babel-core babel-preset-es2015

Slide 36

Slide 36 text

$ npm install --save-dev \ babel-loader babel-core babel-preset-es2015

Slide 37

Slide 37 text

$ npm install --save-dev \ babel-loader babel-core babel-preset-es2015

Slide 38

Slide 38 text

$ npm install --save-dev \ babel-loader babel-core babel-preset-es2015

Slide 39

Slide 39 text

$ npm install --save-dev \ babel-loader babel-core babel-preset-es2015 { "presets": ["es2015"] } .babelrc or babel key in package.json

Slide 40

Slide 40 text

module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };

Slide 41

Slide 41 text

module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };

Slide 42

Slide 42 text

module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };

Slide 43

Slide 43 text

module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };

Slide 44

Slide 44 text

module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };

Slide 45

Slide 45 text

module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, }; Demo

Slide 46

Slide 46 text

import leftPad from 'left-pad'; import createLogger from './modules/log'; import * as math from './modules/math'; const logger = createLogger(document.getElementById('log')); logger.log('29 =', leftPad(Number(29).toString(2), 8, 0)); logger.log('40 + 2 =', math.add(40, 2)); logger.log('10 x 2 =', math.multiply(10, 2)); RESOLUTION

Slide 47

Slide 47 text

import leftPad from 'left-pad'; import createLogger from './modules/log'; import * as math from './modules/math'; const logger = createLogger(document.getElementById('log')); logger.log('29 =', leftPad(Number(29).toString(2), 8, 0)); logger.log('40 + 2 =', math.add(40, 2)); logger.log('10 x 2 =', math.multiply(10, 2)); RESOLUTION

Slide 48

Slide 48 text

const path = require('path'); module.exports = { entry: './main.js', output: { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };

Slide 49

Slide 49 text

const path = require('path'); module.exports = { entry: './main.js', output: { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };

Slide 50

Slide 50 text

const path = require('path'); module.exports = { entry: './main.js', output: { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };

Slide 51

Slide 51 text

const path = require('path'); module.exports = { entry: './main.js', output: { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, }; Must be absolute path!

Slide 52

Slide 52 text

RESOLUTION import leftPad from 'left-pad'; import createLogger from 'log'; import * as math from 'math'; const logger = createLogger(document.getElementById('log')); logger.log('29 =', leftPad(Number(29).toString(2), 8, 0)); logger.log('40 + 2 =', math.add(40, 2)); logger.log('10 x 2 =', math.multiply(10, 2));

Slide 53

Slide 53 text

RESOLUTION import leftPad from 'left-pad'; import createLogger from 'log'; import * as math from 'math'; const logger = createLogger(document.getElementById('log')); logger.log('29 =', leftPad(Number(29).toString(2), 8, 0)); logger.log('40 + 2 =', math.add(40, 2)); logger.log('10 x 2 =', math.multiply(10, 2));

Slide 54

Slide 54 text

RESOLUTION import leftPad from 'left-pad'; import createLogger from 'log'; import * as math from 'math'; const logger = createLogger(document.getElementById('log')); logger.log('29 =', leftPad(Number(29).toString(2), 8, 0)); logger.log('40 + 2 =', math.add(40, 2)); logger.log('10 x 2 =', math.multiply(10, 2)); ?

Slide 55

Slide 55 text

import leftPad from 'left-pad'; import createLogger from 'log'; import * as math from 'math'; import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; $ npm install --save left-pad $ npm install --save \ jquery react react-dom \ moment Automatically resolve to node_modules

Slide 56

Slide 56 text

import leftPad from 'left-pad'; import createLogger from 'log'; import * as math from 'math'; import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; $ npm install --save left-pad $ npm install --save \ jquery react react-dom \ moment Automatically resolve to node_modules

Slide 57

Slide 57 text

MULTIPLE ENTRIES main.html numbers.html

Slide 58

Slide 58 text

MULTIPLE ENTRIES main.js main.bundle.js numbers.js numbers.bundle.js webpack.main.config.js webpack.numbers.config.js

Slide 59

Slide 59 text

MULTIPLE ENTRIES main.js main.bundle.js numbers.js numbers.bundle.js webpack.main.config.js webpack.numbers.config.js x

Slide 60

Slide 60 text

MULTIPLE ENTRIES main.js numbers.js main.bundle.js numbers.bundle.js

Slide 61

Slide 61 text

const path = require('path'); module.exports = { entry: { main: './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES

Slide 62

Slide 62 text

const path = require('path'); module.exports = { entry: { main: './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES

Slide 63

Slide 63 text

const path = require('path'); module.exports = { entry: { main: './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES

Slide 64

Slide 64 text

const path = require('path'); module.exports = { entry: { main: './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES

Slide 65

Slide 65 text

const path = require('path'); module.exports = { entry: { main: './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES Demo

Slide 66

Slide 66 text

DEBUGGING

Slide 67

Slide 67 text

var numbers = [1, 2, 3, 4, 5]; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = numbers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var n = _step.value; console.log(n.toStrin()); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } const numbers = [1, 2, 3, 4, 5]; for (const n of numbers) { console.log(n.toStrin()); }

Slide 68

Slide 68 text

var numbers = [1, 2, 3, 4, 5]; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = numbers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var n = _step.value; console.log(n.toStrin()); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } const numbers = [1, 2, 3, 4, 5]; for (const n of numbers) { console.log(n.toStrin()); } TypeError

Slide 69

Slide 69 text

SOURCE MAPS var numbers = [1, 2, 3, 4, 5]; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = numbers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var n = _step.value; console.log(n.toStrin()); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } }

Slide 70

Slide 70 text

SOURCE MAPS var numbers = [1, 2, 3, 4, 5]; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = numbers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var n = _step.value; console.log(n.toStrin()); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } const numbers = [1, 2, 3, 4, 5]; for (const n of numbers) { console.log(n.toStrin()); }

Slide 71

Slide 71 text

SOURCE MAPS main.js bundle.js bundle.js.map main.js bundle.js Inline Separate

Slide 72

Slide 72 text

const path = require('path'); module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS

Slide 73

Slide 73 text

const path = require('path'); module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS

Slide 74

Slide 74 text

const path = require('path'); module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS Demo

Slide 75

Slide 75 text

DEVELOPMENT webpack-dev-server

Slide 76

Slide 76 text

webpack-dev-server

Slide 77

Slide 77 text

webpack-dev-server bundle.js?

Slide 78

Slide 78 text

webpack-dev-server bundle.js?

Slide 79

Slide 79 text

webpack-dev-server main.js left-pad log math

Slide 80

Slide 80 text

webpack-dev-server main.js left-pad log math

Slide 81

Slide 81 text

webpack-dev-server main.js left-pad log math !

Slide 82

Slide 82 text

webpack-dev-server

Slide 83

Slide 83 text

webpack-dev-server The bundle updated!

Slide 84

Slide 84 text

webpack-dev-server bundle.js?

Slide 85

Slide 85 text

webpack-dev-server bundle.js?

Slide 86

Slide 86 text

webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline

Slide 87

Slide 87 text

webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline

Slide 88

Slide 88 text

webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline

Slide 89

Slide 89 text

webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline

Slide 90

Slide 90 text

webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline !

Slide 91

Slide 91 text

webpack-dev-server const path = require('path'); module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { publicPath: 'http://127.0.0.1:8080/assets/', filename: 'bundle.js', }, resolve: { ... }, module: { ... }, };

Slide 92

Slide 92 text

webpack-dev-server const path = require('path'); module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { publicPath: 'http://127.0.0.1:8080/assets/', filename: 'bundle.js', }, resolve: { ... }, module: { ... }, };

Slide 93

Slide 93 text

webpack-dev-server

Slide 94

Slide 94 text

webpack-dev-server

Slide 95

Slide 95 text

webpack-dev-server Demo

Slide 96

Slide 96 text

webpack-dev-server Hot Module Replacement (HMR)

Slide 97

Slide 97 text

HOT MODULE REPLACEMENT main.js hobbies log

Slide 98

Slide 98 text

HOT MODULE REPLACEMENT bundle.js? main.js hobbies log

Slide 99

Slide 99 text

HOT MODULE REPLACEMENT bundle.js? main.js hobbies log

Slide 100

Slide 100 text

log hobbies HOT MODULE REPLACEMENT main.js hobbies log

Slide 101

Slide 101 text

log hobbies HOT MODULE REPLACEMENT main.js hobbies log

Slide 102

Slide 102 text

log hobbies HOT MODULE REPLACEMENT main.js hobbies log ! hobbies

Slide 103

Slide 103 text

log hobbies HOT MODULE REPLACEMENT main.js hobbies log ! Swap this module out! hobbies

Slide 104

Slide 104 text

HOT MODULE REPLACEMENT $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline --hot

Slide 105

Slide 105 text

$ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline --hot HOT MODULE REPLACEMENT

Slide 106

Slide 106 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); HOT MODULE REPLACEMENT

Slide 107

Slide 107 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); HOT MODULE REPLACEMENT

Slide 108

Slide 108 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); HOT MODULE REPLACEMENT

Slide 109

Slide 109 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); HOT MODULE REPLACEMENT

Slide 110

Slide 110 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); HOT MODULE REPLACEMENT

Slide 111

Slide 111 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); HOT MODULE REPLACEMENT

Slide 112

Slide 112 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); HOT MODULE REPLACEMENT

Slide 113

Slide 113 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); HOT MODULE REPLACEMENT

Slide 114

Slide 114 text

import defaultHobbies from './hobbies'; function logHobbies(hobbies) { logger.log('Hobbies:'); hobbies.forEach(hobby => { logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); Demo HOT MODULE REPLACEMENT

Slide 115

Slide 115 text

HOT MODULE REPLACEMENT*

Slide 116

Slide 116 text

HOT MODULE REPLACEMENT* *Pure components and persistent state • github.com/gaearon/react-hot-loader • github.com/yargalot/Angular-HMR • github.com/mgechev/angular2-hot-loader • github.com/AngularClass/angular2-hmr

Slide 117

Slide 117 text

HOT MODULE REPLACEMENT* Demo

Slide 118

Slide 118 text

CSS MODULES

Slide 119

Slide 119 text

/* General */ .highlight { background: rgba(255, 0, 0, 0.2); border: 4px solid rgba(255, 0, 0, 0.4); color: #c00; font-style: italic; padding: 12px; } /* Data Grid */ .datagrid tr.highlight td { background-color: #ccc; border-top: 1px solid #999; }

Slide 120

Slide 120 text

/* General */ .highlight { background: rgba(255, 0, 0, 0.2); border: 4px solid rgba(255, 0, 0, 0.4); color: #c00; font-style: italic; padding: 12px; } /* Data Grid */ .datagrid tr.highlight td { background-color: #ccc; border-top: 1px solid #999; }

Slide 121

Slide 121 text

BEM OOCSS SMACSS

Slide 122

Slide 122 text

CSS MODULES datagrid.css general.css

Slide 123

Slide 123 text

$ npm install --save-dev css-loader style-loader CSS MODULES

Slide 124

Slide 124 text

module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { ... }, resolve: { ... }, module: { loaders: [ ... { test: /\.css$/, loader: 'style!css?modules', }, ], }, };

Slide 125

Slide 125 text

module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { ... }, resolve: { ... }, module: { loaders: [ ... { test: /\.css$/, loader: 'style!css?modules', }, ], }, };

Slide 126

Slide 126 text

{ test: /\.css$/, loader: 'style ! css ? modules', },

Slide 127

Slide 127 text

{ test: /\.css$/, loader: 'style ! css ? modules', },

Slide 128

Slide 128 text

{ test: /\.css$/, loader: 'style ! css ? modules', },

Slide 129

Slide 129 text

{ test: /\.css$/, loader: 'style ! css ? modules', },

Slide 130

Slide 130 text

{ test: /\.css$/, loader: 'style ! css ? modules', },

Slide 131

Slide 131 text

{ test: /\.css$/, loader: 'style ! css ? modules', },

Slide 132

Slide 132 text

CSS MODULES datagrid.css general.css css-loader style-loader ...

Slide 133

Slide 133 text

CSS MODULES import React, { Component, PropTypes } from 'react'; import styles from './styles.css';

Slide 134

Slide 134 text

CSS MODULES import React, { Component, PropTypes } from 'react'; import styles from './styles.css';

Slide 135

Slide 135 text

CSS MODULES import React, { Component, PropTypes } from 'react'; import styles from './styles.css';

Slide 136

Slide 136 text

CSS MODULES Demo import React, { Component, PropTypes } from 'react'; import styles from './styles.css';

Slide 137

Slide 137 text

PRODUCTION

Slide 138

Slide 138 text

main.js main.bundle.js main.js main-81ca0155911e480de735.js webpack.dev.config.js webpack.prod.config.js DEVELOPMENT PRODUCTION

Slide 139

Slide 139 text

module.exports = { ... plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', '__DEV__': false, }), new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), new ExtractTextPlugin('main-[chunkhash].css'), new webpack.optimize.UglifyJsPlugin({ minimize: true, }), ], };

Slide 140

Slide 140 text

module.exports = { ... plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', '__DEV__': false, }), new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), new ExtractTextPlugin('main-[chunkhash].css'), new webpack.optimize.UglifyJsPlugin({ minimize: true, }), ], };

Slide 141

Slide 141 text

DEBUGGING PERFORMANCE ENHANCEMENTS FEATURE FLAGS DefinePlugin

Slide 142

Slide 142 text

const webpack = require('webpack'); new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', '__DEV__': false, 'NEW_FEATURE': false, }); const webpack = require('webpack'); new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"', '__DEV__': true, 'NEW_FEATURE': true, }), webpack.prod.config.js webpack.dev.config.js

Slide 143

Slide 143 text

if (process.env.NODE_ENV !== 'production') { console.log('DEBUG MESSAGE'); } if (__DEV__) { console.log('IN DEVELOPMENT MODE'); } if (NEW_FEATURE) { newFeature.run(); }

Slide 144

Slide 144 text

if (false) { console.log('DEBUG MESSAGE'); } if (false) { console.log('IN DEVELOPMENT MODE'); } if (false) { newFeature.run(); }

Slide 145

Slide 145 text

module.exports = { ... plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', '__DEV__': false, }), new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), new ExtractTextPlugin('main-[chunkhash].css'), new webpack.optimize.UglifyJsPlugin({ minimize: true, }), ], };

Slide 146

Slide 146 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js

Slide 147

Slide 147 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js

Slide 148

Slide 148 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js react jquery react-dom

Slide 149

Slide 149 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-f571e3836f6a11af10e0.js react jquery react-dom

Slide 150

Slide 150 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-f571e3836f6a11af10e0.js

Slide 151

Slide 151 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-f571e3836f6a11af10e0.js react jquery react-dom

Slide 152

Slide 152 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js vendor-81ca0155911e480de735.js

Slide 153

Slide 153 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js vendor-81ca0155911e480de735.js

Slide 154

Slide 154 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js react jquery react-dom vendor-81ca0155911e480de735.js

Slide 155

Slide 155 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js main-f571e3836f6a11af10e0.js react jquery react-dom vendor-81ca0155911e480de735.js

Slide 156

Slide 156 text

// main.js import $ from 'jquery'; import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-f571e3836f6a11af10e0.js react jquery react-dom vendor-81ca0155911e480de735.js

Slide 157

Slide 157 text

module.exports = { entry: { main: './main.js', vendor: ['jquery', 'react', 'react-dom'], }, output: { filename: '[name]-[chunkhash].js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), ], };

Slide 158

Slide 158 text

module.exports = { entry: { main: './main.js', vendor: ['jquery', 'react', 'react-dom'], }, output: { filename: '[name]-[chunkhash].js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), ], };

Slide 159

Slide 159 text

module.exports = { entry: { main: './main.js', vendor: ['jquery', 'react', 'react-dom'], }, output: { filename: '[name]-[chunkhash].js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), ], };

Slide 160

Slide 160 text

module.exports = { entry: { main: './main.js', vendor: ['jquery', 'react', 'react-dom'], }, output: { filename: '[name]-[chunkhash].js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), ], };

Slide 161

Slide 161 text

module.exports = { entry: { main: './main.js', vendor: ['jquery', 'react', 'react-dom'], }, output: { filename: '[name]-[chunkhash].js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), ], };

Slide 162

Slide 162 text

module.exports = { entry: { main: './main.js', vendor: ['jquery', 'react', 'react-dom'], }, output: { filename: '[name]-[chunkhash].js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), ], };

Slide 163

Slide 163 text

module.exports = { entry: { main: './main.js', vendor: ['jquery', 'react', 'react-dom'], }, output: { filename: '[name]-[chunkhash].js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), ], };

Slide 164

Slide 164 text

module.exports = { ... plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', '__DEV__': false, }), new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), new ExtractTextPlugin('main-[chunkhash].css'), new webpack.optimize.UglifyJsPlugin({ minimize: true, }), ], };

Slide 165

Slide 165 text

EXTRACT CSS datagrid.css header.css css-loader style-loader ...

Slide 166

Slide 166 text

datagrid.css header.css css-loader style-loader main-81ca0155911e480de735.css EXTRACT CSS

Slide 167

Slide 167 text

$ npm install --save-dev \ extract-text-webpack-plugin EXTRACT CSS

Slide 168

Slide 168 text

const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules'), }, ], }, plugins: [ new ExtractTextPlugin('main-[chunkhash].css'), ], };

Slide 169

Slide 169 text

const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules'), }, ], }, plugins: [ new ExtractTextPlugin('main-[chunkhash].css'), ], };

Slide 170

Slide 170 text

const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules'), }, ], }, plugins: [ new ExtractTextPlugin('main-[chunkhash].css'), ], };

Slide 171

Slide 171 text

const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules'), }, ], }, plugins: [ new ExtractTextPlugin('main-[chunkhash].css'), ], };

Slide 172

Slide 172 text

const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules'), }, ], }, plugins: [ new ExtractTextPlugin('main-[chunkhash].css'), ], };

Slide 173

Slide 173 text

module.exports = { ... plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', '__DEV__': false, }), new webpack.optimize.CommonsChunkPlugin( 'vendor', 'vendor-[chunkhash].js' ), new ExtractTextPlugin('main-[chunkhash].css'), new webpack.optimize.UglifyJsPlugin({ minimize: true, }), ], };

Slide 174

Slide 174 text

if (process.env.NODE_ENV !== 'production') { console.log('DEBUG MESSAGE'); } if (__DEV__) { console.log('IN DEVELOPMENT MODE'); } if (NEW_FEATURE) { newFeature.run(); } DEAD CODE

Slide 175

Slide 175 text

DEAD CODE if (false) { console.log('DEBUG MESSAGE'); } if (false) { console.log('IN DEVELOPMENT MODE'); } if (false) { newFeature.run(); }

Slide 176

Slide 176 text

DEAD CODE if (false) { console.log('DEBUG MESSAGE'); } if (false) { console.log('IN DEVELOPMENT MODE'); } if (false) { newFeature.run(); } x

Slide 177

Slide 177 text

RESOURCES • webpack.github.io • github.com/gaearon/react-hot-loader • github.com/yargalot/Angular-HMR • github.com/mgechev/angular2-hot-loader • github.com/AngularClass/angular2-hmr • browserify.org • rollupjs.org

Slide 178

Slide 178 text

THANKS! Jeremy Fairbank @elpapapollo @jfairbank Code: bit.ly/29XKTCW