Codestock: Bundle the Web with Webpack

1.

Bundle webpack the web with Jeremy Fairbank @elpapapollo @jfairbank

2.

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

3.

None

4.

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

5.

<script src="jquery.js"></script> <script src="lodash.js"></script> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="redux.js"></script>
<script src="react-redux.js"></script> <script src="moment.js"></script> <script src="foo/bar.js"></script> <script src="app.js"></script> IMPLICIT

6.

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); });

7.

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

8.

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';

9.

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

10.

webpack MODULE BUNDLER

11.

require define module.exports import export

12.

require define module.exports import export

13.

require define module.exports import export bundle.js

14.

None

15.

None

16.

// 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 = <FooBar data={data} />; render(app, el); });

17.

import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data';

18.


19.


20.

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 … … … … …

21.

GETTING STARTED nodejs.org

22.

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

23.

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

24.

// 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

25.

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

26.


27.


28.


29.

'./main.js', output: { filename: './bundle.js', }, }; Demo

30.

MODULE LOADERS ES2015

31.

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');

32.


33.


34.

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

35.


36.


37.


38.


39.

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

40.

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

41.


42.


43.


44.


45.

module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, }; Demo

46.

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

47.

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

48.

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

49.


50.


51.

{ filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, }; Must be absolute path!

52.

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));

53.

* 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));

54.

* 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)); ?

55.

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

56.

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

57.

MULTIPLE ENTRIES <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head>
<body> <script src="main.bundle.js"> </script> </body> </html> main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script src="numbers.bundle.js"> </script> </body> </html> numbers.html

58.

MULTIPLE ENTRIES main.js main.bundle.js numbers.js numbers.bundle.js webpack.main.conﬁg.js webpack.numbers.conﬁg.js

59.

MULTIPLE ENTRIES main.js main.bundle.js numbers.js numbers.bundle.js webpack.main.conﬁg.js webpack.numbers.conﬁg.js x

60.

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

61.

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

62.


63.


64.


65.

'./main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES Demo

66.

DEBUGGING

67.

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()); }

68.

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

69.

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; } } }

70.

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()); }

71.

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

72.

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

73.

'./main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS

74.

'./main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS Demo

75.

DEVELOPMENT webpack-dev-server

76.

webpack-dev-server

77.

webpack-dev-server bundle.js?

78.


79.

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

80.

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

81.

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

82.

webpack-dev-server

83.

webpack-dev-server The bundle updated!

84.


85.


86.

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

87.

127.0.0.1 --port 8080 --inline

88.

127.0.0.1 --port 8080 --inline

89.

127.0.0.1 --port 8080 --inline

90.

127.0.0.1 --port 8080 --inline !

91.

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: { ... }, };

92.

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: { ... }, };

93.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div
id="log"></div> <script src="http://127.0.0.1:8080/assets/bundle.js"> </script> </body> </html> webpack-dev-server

94.

id="log"></div> <script src="http://127.0.0.1:8080/assets/bundle.js"> </script> </body> </html> webpack-dev-server

95.

id="log"></div> <script src="http://127.0.0.1:8080/assets/bundle.js"> </script> </body> </html> webpack-dev-server Demo

96.

webpack-dev-server Hot Module Replacement (HMR)

97.

HOT MODULE REPLACEMENT main.js hobbies log

98.

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

99.

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

100.

log hobbies HOT MODULE REPLACEMENT main.js hobbies log

101.

log hobbies HOT MODULE REPLACEMENT main.js hobbies log

102.

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

103.

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

104.

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

105.

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

106.

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

107.


108.


109.


110.


111.


112.


113.


114.

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

115.

HOT MODULE REPLACEMENT*

116.

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

117.

HOT MODULE REPLACEMENT* Demo

118.

CSS MODULES

119.

/* 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; }

120.

/* 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; }

121.

BEM OOCSS SMACSS

122.

CSS MODULES datagrid.css general.css

123.

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

124.

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

125.

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

126.

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

127.


128.


129.


130.


131.


132.

CSS MODULES datagrid.css general.css css-loader style-loader <style> ... </style>

133.

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

134.


135.


136.

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

137.

PRODUCTION

138.

main.js main.bundle.js main.js main-81ca0155911e480de735.js webpack.dev.conﬁg.js webpack.prod.conﬁg.js DEVELOPMENT PRODUCTION

139.

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, }), ], };

140.


141.

DEBUGGING PERFORMANCE ENHANCEMENTS FEATURE FLAGS DefinePlugin

142.

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.conﬁg.js webpack.dev.conﬁg.js

143.

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

144.

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

145.


146.

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

147.

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

148.

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

149.

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

150.

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

151.

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

152.

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

153.

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

154.

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

155.

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

156.

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

157.

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' ), ], };

158.


159.


160.


161.


162.


163.


164.


165.

EXTRACT CSS datagrid.css header.css css-loader style-loader <style> ... </style>

166.

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

167.

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

168.

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'), ], };

169.


170.


171.


172.


173.


174.

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

175.

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

176.

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

177.

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

178.

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

Codestock: Bundle the Web with Webpack

Codestock: Bundle the Web with Webpack

Want more?

Transcript