Codestock: Bundle the Web with Webpack

Transcript

178 slides

Bundle webpack the web with Jeremy Fairbank @elpapapollo @jfairbank
sigient.com (pushagency.io) Your website, SimplyBuilt. simplybuilt.com
None
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
<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
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); });
lodash.js react.js redux.js react-dom.js jquery.js react-redux.js moment.js foo/bar.js app.js
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';
require define module.exports import export ? ? ? ? ?
webpack MODULE BUNDLER
require define module.exports import export
require define module.exports import export
require define module.exports import export bundle.js
None
None
// 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); });
import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data';
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 … … … … …
GETTING STARTED nodejs.org
$ npm install -g webpack $ webpack main.js bundle.js Install
global binary
$ npm install -g webpack $ webpack main.js bundle.js Install
global binary Entry ﬁle Output ﬁle
// 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
CONFIGURATION webpack.conﬁg.js and run $ webpack module.exports = { entry:
'./main.js', output: { filename: './bundle.js', }, };
'./main.js', output: { filename: './bundle.js', }, }; Demo
MODULE LOADERS ES2015
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');
$ npm install --save-dev \ babel-loader babel-core babel-preset-es2015
$ npm install --save-dev \ babel-loader babel-core babel-preset-es2015 { "presets":
["es2015"] } .babelrc or babel key in package.json
module.exports = { entry: './main.js', output: { filename: './bundle.js', },
module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };
module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, }; Demo
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
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
const path = require('path'); module.exports = { entry: './main.js', output:
{ filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };
{ filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, }; Must be absolute path!
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));
* 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));
* 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)); ?
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
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
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
MULTIPLE ENTRIES main.js main.bundle.js numbers.js numbers.bundle.js webpack.main.conﬁg.js webpack.numbers.conﬁg.js
MULTIPLE ENTRIES main.js main.bundle.js numbers.js numbers.bundle.js webpack.main.conﬁg.js webpack.numbers.conﬁg.js x
MULTIPLE ENTRIES main.js numbers.js main.bundle.js numbers.bundle.js
const path = require('path'); module.exports = { entry: { main:
'./main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES
'./main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES Demo
DEBUGGING
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()); }
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
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; } } }
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()); }
SOURCE MAPS main.js bundle.js bundle.js.map main.js bundle.js Inline Separate
const path = require('path'); module.exports = { devtool: '#inline-source-map', entry:
'./main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS
'./main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS
'./main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS Demo
DEVELOPMENT webpack-dev-server
webpack-dev-server
webpack-dev-server bundle.js?
webpack-dev-server main.js left-pad log math
webpack-dev-server main.js left-pad log math
webpack-dev-server main.js left-pad log math !
webpack-dev-server
webpack-dev-server The bundle updated!
webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host
127.0.0.1 --port 8080 --inline
127.0.0.1 --port 8080 --inline
127.0.0.1 --port 8080 --inline
127.0.0.1 --port 8080 --inline
127.0.0.1 --port 8080 --inline !
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: { ... }, };
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: { ... }, };
<!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
id="log"></div> <script src="http://127.0.0.1:8080/assets/bundle.js"> </script> </body> </html> webpack-dev-server
id="log"></div> <script src="http://127.0.0.1:8080/assets/bundle.js"> </script> </body> </html> webpack-dev-server Demo
webpack-dev-server Hot Module Replacement (HMR)
HOT MODULE REPLACEMENT main.js hobbies log
HOT MODULE REPLACEMENT bundle.js? main.js hobbies log
HOT MODULE REPLACEMENT bundle.js? main.js hobbies log
log hobbies HOT MODULE REPLACEMENT main.js hobbies log
log hobbies HOT MODULE REPLACEMENT main.js hobbies log
log hobbies HOT MODULE REPLACEMENT main.js hobbies log ! hobbies
log hobbies HOT MODULE REPLACEMENT main.js hobbies log ! Swap
this module out! hobbies
HOT MODULE REPLACEMENT $ webpack-dev-server \ --host 127.0.0.1 --port 8080
--inline --hot
$ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline --hot HOT
MODULE REPLACEMENT
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
{ logger.log(hobby); }); } if (module.hot) { module.hot.accept('./hobbies', () => { const newHobbies = require('./hobbies').default; logHobbies(newHobbies); }); } logHobbies(defaultHobbies); Demo HOT MODULE REPLACEMENT
HOT MODULE REPLACEMENT*
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
HOT MODULE REPLACEMENT* Demo
CSS MODULES
/* 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; }
/* 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; }
BEM OOCSS SMACSS
CSS MODULES datagrid.css general.css
$ npm install --save-dev css-loader style-loader CSS MODULES
module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { ...
}, resolve: { ... }, module: { loaders: [ ... { test: /\.css$/, loader: 'style!css?modules', }, ], }, };
module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { ...
}, resolve: { ... }, module: { loaders: [ ... { test: /\.css$/, loader: 'style!css?modules', }, ], }, };
{ test: /\.css$/, loader: 'style ! css ? modules', },
CSS MODULES datagrid.css general.css css-loader style-loader <style> ... </style>
CSS MODULES import React, { Component, PropTypes } from 'react';
import styles from './styles.css';
CSS MODULES Demo import React, { Component, PropTypes } from
'react'; import styles from './styles.css';
PRODUCTION
main.js main.bundle.js main.js main-81ca0155911e480de735.js webpack.dev.conﬁg.js webpack.prod.conﬁg.js DEVELOPMENT PRODUCTION
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, }), ], };
DEBUGGING PERFORMANCE ENHANCEMENTS FEATURE FLAGS DefinePlugin
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
if (process.env.NODE_ENV !== 'production') { console.log('DEBUG MESSAGE'); } if (__DEV__)
{ console.log('IN DEVELOPMENT MODE'); } if (NEW_FEATURE) { newFeature.run(); }
if (false) { console.log('DEBUG MESSAGE'); } if (false) { console.log('IN
DEVELOPMENT MODE'); } if (false) { newFeature.run(); }
import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js
import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-81ca0155911e480de735.js
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
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
import { render } from 'react-dom'; import moment from 'moment'; import FooBar from 'foo/bar'; import { getData } from 'util/data'; main-f571e3836f6a11af10e0.js
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
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
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
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
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
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
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' ), ], };
EXTRACT CSS datagrid.css header.css css-loader style-loader <style> ... </style>
datagrid.css header.css css-loader style-loader main-81ca0155911e480de735.css EXTRACT CSS
$ npm install --save-dev \ extract-text-webpack-plugin EXTRACT CSS
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'), ], };
if (process.env.NODE_ENV !== 'production') { console.log('DEBUG MESSAGE'); } if (__DEV__)
{ console.log('IN DEVELOPMENT MODE'); } if (NEW_FEATURE) { newFeature.run(); } DEAD CODE
DEAD CODE if (false) { console.log('DEBUG MESSAGE'); } if (false)
{ console.log('IN DEVELOPMENT MODE'); } if (false) { newFeature.run(); }
DEAD CODE if (false) { console.log('DEBUG MESSAGE'); } if (false)
{ console.log('IN DEVELOPMENT MODE'); } if (false) { newFeature.run(); } x
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
THANKS! Jeremy Fairbank @elpapapollo @jfairbank Code: bit.ly/29XKTCW