├── .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 Express [middleware](https://github.com/ahfarmer/webpack-hmr-3-ways/tree/master/middleware).
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-hot-middleware",
 3 |   "version": "0.0.1",
 4 |   "description": "Example project showing use of webpack hot middleware.",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "node server.js"
 8 |   },
 9 |   "keywords": [
10 |     "webpack",
11 |     "webpack-dev-server",
12 |     "webpack-hot-middleware",
13 |     "express",
14 |     "HMR",
15 |     "hot module replacement"
16 |   ],
17 |   "author": "Andrew H Farmer",
18 |   "license": "MIT",
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git://github.com/ahfarmer/webpack-hmr-3-ways.git"
22 |   },
23 |   "dependencies": {
24 |     "express": "^4.13.3",
25 |     "webpack": "^1.12.2",
26 |     "webpack-dev-middleware": "^1.2.0",
27 |     "webpack-hot-middleware": "^2.4.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var webpackDevMiddleware = require("webpack-dev-middleware");
 3 | var webpackHotMiddleware = require("webpack-hot-middleware");
 4 | var webpack = require('webpack');
 5 | var webpackConfig = require('./webpack.config.js');
 6 | var path = require('path');
 7 | var app = express();
 8 | 
 9 | var compiler = webpack(webpackConfig);
10 | 
11 | app.use(webpackDevMiddleware(compiler, {
12 |   hot: true,
13 |   filename: 'bundle.js',
14 |   publicPath: '/assets/',
15 |   stats: {
16 |     colors: true,
17 |   },
18 |   historyApiFallback: true,
19 | }));
20 | 
21 | app.use(webpackHotMiddleware(compiler, {
22 |   log: console.log,
23 |   path: '/__webpack_hmr',
24 |   heartbeat: 10 * 1000,
25 | }));
26 | 
27 | app.get('/', function (req, res) {
28 |   res.send('<body>Hello World<script src=\'assets/bundle.js\'></script></body>');
29 | });
30 | 
31 | var server = app.listen(3000, function () {
32 |   var host = server.address().address;
33 |   var port = server.address().port;
34 | 
35 |   console.log('Example app listening at http://%s:%s', host, port);
36 | });
37 | 


--------------------------------------------------------------------------------
/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 |     'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
 8 |     './index.js',
 9 |   ],
10 |   output: {
11 |     path: path.join(__dirname, 'www'),
12 |     filename: 'bundle.js',
13 |     publicPath: '/assets/',
14 |   },
15 |   plugins: [
16 |     new webpack.optimize.OccurenceOrderPlugin(),
17 |     new webpack.HotModuleReplacementPlugin(),
18 |     new webpack.NoErrorsPlugin()
19 |   ]
20 | };
21 | module.exports = config;
22 | 


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
 1 | <body>
 2 |   <span id='hello'>
 3 |     Hello
 4 |   </span>
 5 |   <span id='world'>
 6 |     World
 7 |   </span>
 8 |   <script src='bundle.js'></script>
 9 | </body>
10 | 


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