Codestock: Bundle the Web with Webpack

Codestock: Bundle the Web with Webpack

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

July 16, 2016
Tweet

Transcript

  1. 3.
  2. 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
  3. 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
  4. 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); });
  5. 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';
  6. 14.
  7. 15.
  8. 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); });
  9. 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';
  10. 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';
  11. 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';
  12. 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 … … … … …
  13. 23.

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

    global binary Entry file Output file
  14. 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
  15. 25.

    CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry:

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

    CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry:

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

    CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry:

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

    CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry:

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

    CONFIGURATION webpack.config.js and run $ webpack module.exports = { entry:

    './main.js', output: { filename: './bundle.js', }, }; Demo
  20. 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');
  21. 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');
  22. 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');
  23. 39.
  24. 40.

    module.exports = { entry: './main.js', output: { filename: './bundle.js', },

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

    module.exports = { entry: './main.js', output: { filename: './bundle.js', },

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

    module.exports = { entry: './main.js', output: { filename: './bundle.js', },

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

    module.exports = { entry: './main.js', output: { filename: './bundle.js', },

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

    module.exports = { entry: './main.js', output: { filename: './bundle.js', },

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

    module.exports = { entry: './main.js', output: { filename: './bundle.js', },

    module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', }, ], }, }; Demo
  30. 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
  31. 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
  32. 48.

    const path = require('path'); module.exports = { entry: './main.js', output:

    { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };
  33. 49.

    const path = require('path'); module.exports = { entry: './main.js', output:

    { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };
  34. 50.

    const path = require('path'); module.exports = { entry: './main.js', output:

    { filename: './bundle.js', }, resolve: { root: [ path.join(__dirname, 'modules'), ], }, module: { ... }, };
  35. 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!
  36. 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));
  37. 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));
  38. 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)); ?
  39. 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
  40. 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
  41. 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
  42. 61.

    const path = require('path'); module.exports = { entry: { main:

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

    const path = require('path'); module.exports = { entry: { main:

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

    const path = require('path'); module.exports = { entry: { main:

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

    const path = require('path'); module.exports = { entry: { main:

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

    const path = require('path'); module.exports = { entry: { main:

    './main.js', numbers: './numbers.js', }, output: { filename: '[name].bundle.js', }, resolve: { ... }, module: { ... }, }; MULTIPLE ENTRIES Demo
  47. 66.
  48. 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()); }
  49. 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
  50. 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; } } }
  51. 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()); }
  52. 72.

    const path = require('path'); module.exports = { devtool: '#inline-source-map', entry:

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

    const path = require('path'); module.exports = { devtool: '#inline-source-map', entry:

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

    const path = require('path'); module.exports = { devtool: '#inline-source-map', entry:

    './main.js', output: { filename: 'bundle.js', }, resolve: { ... }, module: { ... }, }; SOURCE MAPS Demo
  55. 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: { ... }, };
  56. 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: { ... }, };
  57. 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
  58. 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
  59. 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
  60. 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
  61. 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
  62. 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
  63. 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
  64. 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
  65. 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
  66. 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
  67. 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
  68. 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
  69. 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
  70. 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; }
  71. 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; }
  72. 124.

    module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { ...

    }, resolve: { ... }, module: { loaders: [ ... { test: /\.css$/, loader: 'style!css?modules', }, ], }, };
  73. 125.

    module.exports = { devtool: '#inline-source-map', entry: './main.js', output: { ...

    }, resolve: { ... }, module: { loaders: [ ... { test: /\.css$/, loader: 'style!css?modules', }, ], }, };
  74. 136.

    CSS MODULES Demo import React, { Component, PropTypes } from

    'react'; import styles from './styles.css';
  75. 137.
  76. 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, }), ], };
  77. 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, }), ], };
  78. 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
  79. 143.

    if (process.env.NODE_ENV !== 'production') { console.log('DEBUG MESSAGE'); } if (__DEV__)

    { console.log('IN DEVELOPMENT MODE'); } if (NEW_FEATURE) { newFeature.run(); }
  80. 144.

    if (false) { console.log('DEBUG MESSAGE'); } if (false) { console.log('IN

    DEVELOPMENT MODE'); } if (false) { newFeature.run(); }
  81. 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, }), ], };
  82. 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
  83. 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
  84. 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
  85. 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
  86. 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
  87. 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
  88. 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
  89. 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
  90. 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
  91. 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
  92. 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
  93. 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' ), ], };
  94. 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' ), ], };
  95. 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' ), ], };
  96. 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' ), ], };
  97. 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' ), ], };
  98. 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' ), ], };
  99. 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' ), ], };
  100. 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, }), ], };
  101. 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'), ], };
  102. 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'), ], };
  103. 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'), ], };
  104. 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'), ], };
  105. 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'), ], };
  106. 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, }), ], };
  107. 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
  108. 175.

    DEAD CODE if (false) { console.log('DEBUG MESSAGE'); } if (false)

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

    DEAD CODE if (false) { console.log('DEBUG MESSAGE'); } if (false)

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