webpack-dev-hmr v1.0.0

#webpack-dev-hmr

THIS SHOULD ONLY USED FOR DEVELOPMENT!

DO NOT USE IT IN PRODUCTION!

##what is it? This is an addon for webpack-dev-middleware. It adds support for hot module replacement. HMR adds or removes modules while an application is running without a page reload. There is a working example here.

##usage

app.js:

"use strict";

var express = require('express');
var http = require('http');
var webpack = require("webpack");
var webpackMiddleware = require("webpack-dev-middleware");
var webpackConfig = require("./webpack.config.js");
var webpackCompiler = webpack(webpackConfig);
var hmr = require("webpack-dev-hmr");

var app = express();
app.set('port', 3000);

app.use(webpackMiddleware(webpackCompiler, {
  publicPath: webpackConfig.output.publicPath,
  hot: true,
  watchDelay: 300,
  stats: {
    colors: true
  }
}));

var server = http.createServer(app);
server.on('listening', function(){

  console.log("Server is listening on port ", app.get('port'));

  hmr.listen(server, webpackCompiler);

}).on('close', function(){

  console.log('closing server');

  hmr.close();

});

module.exports = server;

webpack.config.js:

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    ...
  ],
  output: {
    ...
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel'],
        ...
      }
    ]
  }
};


##resources
* [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)
* [Hot Module Replacement](http://webpack.github.io/docs/hot-module-replacement-with-webpack.html)
* [React Hot Loader](http://gaearon.github.io/react-hot-loader/)
* [Troubleshooting React Hot Loader](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)