Codestock: Bundle the Web with Webpack

Transcript

1. Bundle webpack the web with Jeremy Fairbank @elpapapollo @jfairbank
2. sigient.com (pushagency.io) Your website, SimplyBuilt. simplybuilt.com
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
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. // 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';
18. // 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';
19. // 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';
20. // 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 … … … … …
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 file Output file
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.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, };
26. CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, };
27. CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, };
28. CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './main.js', output: { filename: './bundle.js', }, };
29. CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry: './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. 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');
33. 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');
34. $ npm install --save-dev \ babel-loader babel-core babel-preset-es2015
35. $ npm install --save-dev \ babel-loader babel-core babel-preset-es2015
36. $ npm install --save-dev \ babel-loader babel-core babel-preset-es2015
37. $ npm install --save-dev \ babel-loader babel-core babel-preset-es2015
38. $ npm install --save-dev \ babel-loader babel-core babel-preset-es2015
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. module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };
42. module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };
43. module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };
44. module.exports = { entry: './main.js', output: { filename: './bundle.js', }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, };
45. module.exports = { entry: './main.js', output: { filename: './bundle.js', }, 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. const path = require('path'); module.exports = { entry: './main.js', output: { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };
50. const path = require('path'); module.exports = { entry: './main.js', output: { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };
51. const path = require('path'); module.exports = { entry: './main.js', output: { 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. 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));
54. 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)); ?
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.config.js webpack.numbers.config.js
59. MULTIPLE ENTRIES main.js main.bundle.js numbers.js numbers.bundle.js webpack.main.config.js webpack.numbers.config.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. const path = require('path'); module.exports = { entry: { main: './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES
63. const path = require('path'); module.exports = { entry: { main: './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES
64. const path = require('path'); module.exports = { entry: { main: './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES
65. const path = require('path'); module.exports = { entry: { main: './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. const path = require('path'); module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS
74. const path = require('path'); module.exports = { devtool: '#inline-source-map', entry: './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. webpack-dev-server bundle.js?
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. webpack-dev-server bundle.js?
85. webpack-dev-server bundle.js?
86. webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline
87. webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline
88. webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline
89. webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 127.0.0.1 --port 8080 --inline
90. webpack-dev-server $ npm install -g webpack-dev-server $ webpack-dev-server \ --host 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. <!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
95. <!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 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. 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
108. 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
109. 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
110. 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
111. 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
112. 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
113. 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
114. 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
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. { test: /\.css$/, loader: 'style ! css ? modules', },
128. { test: /\.css$/, loader: 'style ! css ? modules', },
129. { test: /\.css$/, loader: 'style ! css ? modules', },
130. { test: /\.css$/, loader: 'style ! css ? modules', },
131. { test: /\.css$/, loader: 'style ! css ? modules', },
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. CSS MODULES import React, { Component, PropTypes } from 'react'; import styles from './styles.css';
135. CSS MODULES import React, { Component, PropTypes } from 'react'; import styles from './styles.css';
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.config.js webpack.prod.config.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. 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, }), ], };
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.config.js webpack.dev.config.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. 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, }), ], };
146. // 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
147. // 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
148. // 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
149. // 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
150. // 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
151. // 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
152. // 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
153. // 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
154. // 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
155. // 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
156. // 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
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. 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' ), ], };
159. 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' ), ], };
160. 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' ), ], };
161. 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' ), ], };
162. 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' ), ], };
163. 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' ), ], };
164. 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, }), ], };
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. 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'), ], };
170. 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'), ], };
171. 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'), ], };
172. 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'), ], };
173. 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, }), ], };
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