首先安装所需要的package
install --save-dev webpack-dev-server react-hot-loader
webpack-dev-server 起一个简单的express server。具有watch rebuild和refresh(在浏览器中)的功能。
react-hot-loader 所谓的热加载，哎！刚查资料的时候被这名字搞得满迷糊的，尤其是中文翻译，也不带解释具体含义的，其实就是相比较于整个页面的refresh，hot-reload在react的部分局部更新，保持了state的信息。
重新配置entry point
在每一个entry point都加入两个模块，具体看代码，这个我是集成部分我的development.config.js中的配置信息而成的，这里我有些具体rails+webpack。
var developmentConfig = require('./development.config.js'),
_ = require('lodash'),
webpack = require('webpack');
var hotEntries = ['webpack-dev-server/client?http://localhost:3542', 'webpack/hot/only-dev-server'];
var oldEntry = developmentConfig.entry;
var newEntry = {};
_.each(oldEntry, function(val, key) {
newEntry[key] = hotEntries.concat(val);
});
其中要注意'webpack-dev-server/client?http://localhost:3542'这个是你要起的webpack dev server的地址，不要再加具体的asset路径，否则会有各种error，国外有篇文章加了路径，我照做错了。
修改output的publicPath
如果不是一个后台框架+webpack dev server，这个就是正常的路径就好了比如/assets等等。由于我们是后台的程序渲染的页面调用webpack dev server的js，所以这里要配置publicPath带domain，具体如下:
config.output.publicPath = 'http://localhost:3542/assets';
在webpack config 的 plugins中加入两个插件
代码如下：
config.plugins.push(new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin());
这里注意如果利用webpack-dev-server cli 并且加了--hot 这个选项，就不要在这里加入new webpack.HotModuleReplacementPlugin()这个插件了，否则会报Maximum call stack size exceeded错误。
配置js的loader加入react-hot
代码如下：
var babelQuery = {
presets: ['es2015', 'stage-0', 'react'],
plugins: ['transform-runtime']
};
// react-hot 必须在所有的其他的loader之前
config.module.loaders[0] = {
test: /.js$/,
// 这里babel-loader使用的query string的语法形式
loaders: ['react-hot', 'babel-loader?'+JSON.stringify(babelQuery)],
exclude: /(node_modules|bower_components)/
};
这里注意react-hot要放到第一个位置。否则报错。
配置一些dev server用devServer这个key
代码如下:
config.devServer = {
publicPath: 'http://localhost:3542/assets',
contentBase: "./public",
hot: true,
inline: true,
headers: { "Access-Control-Allow-Origin": "http://localhost:3000", "Access-Control-Allow-Credentials": true }
};
这里contentBase是告诉webpack dev server 用哪里的内容做静态资源服务。
注意：一个后台框架+webpack dev server，那么header中的Access-Control-Allow-Origin必须配成后台服务器的地址，不可以用*，Access-Control-Allow-Credentials必须是true。否则cors过不去呀。
最后在package.json中加一句命令吧
代码如下：
"scripts": {
"dev": "webpack --config config/webpack/development.config.js --watch --colors",
"hot_dev": "./node_modules/.bin/webpack-dev-server-cors --config config/webpack/hot.config.js --progress --inline --port 3542 --content-base public/"
},
