├── .gitignore
├── README.md
├── js
    ├── box-creator.js
    ├── index.js
    └── math-doer.js
├── package.json
├── webpack.config.js
└── www
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | www/bundle.js
3 | */www/bundle.js
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## DEPRECATED
2 | 
3 | This project is no longer maintained.
4 | 
5 | To learn about 3 ways to set up Webpack with HMR, check out [webpack-hmr-3-ways](https://github.com/ahfarmer/webpack-hmr-3-ways) or jump to the section on using Webpack with [a server CLI](https://github.com/ahfarmer/webpack-hmr-3-ways/tree/master/server-cli).
6 | 


--------------------------------------------------------------------------------
/js/box-creator.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Example of how to use webpack HMR in a module that creates side effects.
 3 |  *
 4 |  * When this code runs, a <div> is created.
 5 |  *
 6 |  * To prevent a new <div> from being created every time this module is reloaded,
 7 |  * `module.hot.dispose` is used to remove the old <div>.
 8 |  */
 9 | var sideEffectNode = document.createElement('div');
10 | sideEffectNode.setAttribute('style', 'background-color: lightblue; padding: 20px; margin: 10px;');
11 | sideEffectNode.textContent = 'Side Effect';
12 | document.body.appendChild(sideEffectNode);
13 | 
14 | // Remove the most recently-added <div> so that when the code runs again and
15 | // adds a new <div>, we don't end up with duplicate divs.
16 | if (module.hot) {
17 |   module.hot.dispose(function() {
18 |     sideEffectNode.parentNode.removeChild(sideEffectNode);
19 |   });
20 | }
21 | 


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
 1 | var mathDoer = require('./math-doer');
 2 | 
 3 | // This require() statement has side effects.
 4 | require('./box-creator');
 5 | 
 6 | // mathDoer just does some math on 2 inputs.
 7 | var result = mathDoer(7, 3);
 8 | 
 9 | // Console.log statements are reprinted on every reload.
10 | console.log('Math result:' + result);
11 | 
12 | if (module.hot) {
13 |   module.hot.accept();
14 | }
15 | 


--------------------------------------------------------------------------------
/js/math-doer.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * A module that exports a single function that does math.
 3 |  * This is an example of a module with no side effects.
 4 |  *
 5 |  * Since the parent uses `module.hot.accept()`, this file does not need any
 6 |  * special HMR code.
 7 |  */
 8 | function doSomeMaths(x, y) {
 9 |   return x * y + 2;
10 | }
11 | module.exports = doSomeMaths;
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hmr-webpack-dev-server-cli",
 3 |   "version": "0.0.1",
 4 |   "description": "Example project showing the simplest possible way to use webpack HMR.",
 5 |   "main": "webpack.config.js",
 6 |   "scripts": {
 7 |     "start": "webpack-dev-server --content-base=www --hot --inline --watch"
 8 |   },
 9 |   "keywords": [
10 |     "webpack",
11 |     "webpack-dev-server",
12 |     "CLI",
13 |     "HMR",
14 |     "hot module replacement"
15 |   ],
16 |   "author": "Andrew H Farmer",
17 |   "license": "MIT",
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git://github.com/ahfarmer/webpack-hmr-3-ways.git"
21 |   },
22 |   "dependencies": {
23 |     "webpack": "^1.12.2",
24 |     "webpack-dev-server": "^1.12.1"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | 
 3 | var config = {
 4 |   context: path.join(__dirname, 'js'),
 5 |   entry: [
 6 |     './index.js',
 7 |   ],
 8 |   output: {
 9 |     path: path.join(__dirname, 'www'),
10 |     filename: 'bundle.js',
11 |     publicPath: '/',
12 |   },
13 | };
14 | module.exports = config;
15 | 


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
1 | <body>
2 |   Hello World
3 |   <script src='/bundle.js'></script>
4 | </body>
5 | 


--------------------------------------------------------------------------------