├── .gitignore
├── README.md
├── js
    ├── box-creator.js
    ├── index.js
    └── math-doer.js
├── package.json
├── server.js
├── 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 API](https://github.com/ahfarmer/webpack-hmr-3-ways/tree/master/server-api).
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-api",
 3 |   "version": "0.0.1",
 4 |   "description": "Example project showing use of Webpack HMR with the webpack-dev-server API.",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "node server.js"
 8 |   },
 9 |   "keywords": [
10 |     "webpack",
11 |     "webpack-dev-server",
12 |     "API",
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 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file runs a webpack-dev-server, using the API.
 3 |  *
 4 |  * For more information on the options passed to WebpackDevServer,
 5 |  * see the webpack-dev-server API docs:
 6 |  * https://github.com/webpack/docs/wiki/webpack-dev-server#api
 7 |  */
 8 | var WebpackDevServer = require('webpack-dev-server');
 9 | var webpack = require('webpack');
10 | var config = require('./webpack.config.js');
11 | var path = require('path');
12 | 
13 | var compiler = webpack(config);
14 | var server = new WebpackDevServer(compiler, {
15 |   contentBase: 'www',
16 |   hot: true,
17 |   filename: 'bundle.js',
18 |   publicPath: '/',
19 |   stats: {
20 |     colors: true,
21 |   },
22 | });
23 | server.listen(8080, 'localhost', function() {});
24 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | var config = {
 5 |   context: path.join(__dirname, 'js'),
 6 |   entry: [
 7 |     './index.js',
 8 |     'webpack/hot/dev-server',
 9 |     'webpack-dev-server/client?http://localhost:8080/',
10 |   ],
11 |   output: {
12 |     path: path.join(__dirname, 'www'),
13 |     filename: 'bundle.js',
14 |     publicPath: '/',
15 |   },
16 |   plugins: [
17 |     new webpack.HotModuleReplacementPlugin(),
18 |   ]
19 | };
20 | module.exports = config;
21 | 


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


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