React + Webpack HMR (Hot Module Reload)

En package.json modificamos reactmon en su parametro para agregar --ignore components, asi ignorara los cambios en el subdirectorio components
y no nos mostrara que esta reainicializando el server.
..."scripts": {
    "test": "\"echo \\\"Error: test no especificado\\\" && exit 1\"",
    "serve": "nodemon server/server.js --ignore components"
  },
...

Cargamos el babel-hmre "hot module reload"
npm install babel-preset-react-hmre --save-dev

C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install babel-preset-react-hmre --save-dev
react-todo-list@1.0.0 C:\Users\Bext\Desktop\react-todo-list_kweiberth
+-- babel-preset-react-hmre@1.1.1
| +-- babel-plugin-react-transform@2.0.2
| +-- react-transform-catch-errors@1.0.2
| +-- react-transform-hmr@1.0.4
| | +-- global@4.3.2
| | | +-- min-document@2.19.0
| | | | `-- dom-walk@0.1.1
| | | `-- process@0.5.2
| | `-- react-proxy@1.1.8
| |   `-- react-deep-force-update@1.1.1
| `-- redbox-react@1.5.0
|   +-- error-stack-parser@1.3.6
|   | `-- stackframe@0.3.1
|   +-- object-assign@4.1.1
|   +-- prop-types@15.6.0
|   | +-- fbjs@0.8.16
|   | | +-- isomorphic-fetch@2.2.1
|   | | | +-- node-fetch@1.7.3
|   | | | | +-- encoding@0.1.12
|   | | | | `-- is-stream@1.1.0
|   | | | `-- whatwg-fetch@2.0.3
|   | | `-- setimmediate@1.0.5
|   | `-- object-assign@4.1.1
|   `-- sourcemapped-stacktrace@1.1.7
|     `-- source-map@0.5.6
`-- UNMET DEPENDENCY webpack@^1.12.13

npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

se integra a webpack.config.js
...
module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['react' , 'es2015', 'react-hmre']
            }
          }
        ]
    }...

Y se integran en el mismo archivo los plugins

import webpack from 'webpack';

module.exports = ...
...
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: { ...
   
Para que el bundle.js se genere automaticamente cuando se detecta un cambio, en el archivo server/server.js debemos
integrar el archivo webpack.config.js para que el servidor pueda regenerar el bundle.js.

import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

var compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {noinfo: true, publicPath: config.output.publicPath})));
app.use(webpackHotMiddleware(compiler));

- instalamos los paquetes que acabamos de integrar al codigo
C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install --save-dev webpack-dev-middleware webpack-hot-middleware
react-todo-list@1.0.0 C:\Users\Bext\Desktop\react-todo-list_kweiberth
+-- UNMET DEPENDENCY webpack@^1.12.13
+-- webpack-dev-middleware@1.12.2
| +-- memory-fs@0.4.1
| | +-- errno@0.1.4
| | | `-- prr@0.0.0
| | `-- readable-stream@2.3.3
| |   +-- core-util-is@1.0.2
| |   +-- isarray@1.0.0
| |   +-- process-nextick-args@1.0.7
| |   +-- string_decoder@1.0.3
| |   `-- util-deprecate@1.0.2
| +-- mime@1.6.0
| `-- time-stamp@2.0.0
`-- webpack-hot-middleware@2.21.0
  +-- ansi-html@0.0.7
  +-- html-entities@1.2.1
  `-- querystring@0.2.0

npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN webpack-dev-middleware@1.12.2 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.


- Se agrega en entry : 'webpack-hot-middleware/client' en webpack.config.js

- Necesitamos instalar webpack globalmente
npm install -g webpack

C:\Users\Bext\Desktop\react-todo-list_kweiberth>npm install -g webpack
C:\Users\Bext\AppData\Roaming\npm\webpack -> C:\Users\Bext\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
C:\Users\Bext\AppData\Roaming\npm
`-- webpack@3.9.1

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

- instalamos el webpack con npm install --save-dev webpack por que no aparecia en el subdirectorio
node_modules

- Ahora ya que tenemos instalado el hot module reload, lo probamos,  hacemos un cambio en el archivo  components/App.js y al salvarlo, la consola del servidor nos manda
webpack: Compiling...
webpack building...
webpack built dadb7df9fadea33f0c99 in 4035ms
Hash: dadb7df9fadea33f0c99
Version: webpack 1.15.0
Time: 4035ms
                               Asset      Size  Chunks             Chunk Names
                           bundle.js   2.81 MB       0  [emitted]  main
0.01d71f219328f9ec9028.hot-update.js   5.21 kB       0  [emitted]  main
01d71f219328f9ec9028.hot-update.json  36 bytes          [emitted]
chunk    {0} bundle.js, 0.01d71f219328f9ec9028.hot-update.js (main) 1.01 MB [rendered]
    [0] multi main 40 bytes {0}
    [1] ./~/node-libs-browser/~/process/browser.js 5.42 kB {0}
    [2] ./~/fbjs/lib/invariant.js 1.51 kB {0}
    [3] ./~/react/lib/Object.assign.js 1.26 kB {0}
    [4] ./~/fbjs/lib/warning.js 1.77 kB {0}
    [5] ./~/fbjs/lib/ExecutionEnvironment.js 1.09 kB {0}
    [6] ./~/react/lib/ReactMount.js 36.8 kB {0}
    [7] ./~/react/lib/ReactElement.js 8.07 kB {0}
    [8] ./~/react/lib/ReactPerf.js 2.51 kB {0}
...
  [338] ./~/stackframe/stackframe.js 3.48 kB {0}
  [339] ./~/strip-ansi/index.js 161 bytes {0}
  [340] (webpack)-hot-middleware/client-overlay.js 2.21 kB {0}
  [341] (webpack)-hot-middleware/client.js 7.35 kB {0}
  [342] (webpack)-hot-middleware/process-update.js 4.33 kB {0}
webpack: Compiled successfully.

Y automaticamente nuesta pagina refleja el cambio.

Una vez en produccion el HMR no es necesario integrarlo al proyecto.

Fin de Archivo