react-hot-loader记录

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2

npm install --save-dev react-hot-loader@3.0.0-beta.6
或者
npm install --save-dev react-hot-loader@next

.babelrc配置

{
"presets": [
["es2015", {"modules": false}],
// webpack现在已经支持原生的import语句了, 并且将其运用在tree-shaking特性上
"stage-2",
// 规定JS运用的语言规范层级
// Stage 2 是 "草案", 4 是 "已完成", 0 is "稻草人(strawman)"。
// 详情查看 https://tc39.github.io/process-document/ "react"
// 转译React组件为JS代码
],
"plugins": [
"react-hot-loader/babel"
// 开启react代码的模块热替换（HMR）
]
}

config配置：

const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
context: __dirname,
entry:  [
'react-hot-loader/patch',
'webpack/hot/only-dev-server',
'./app/main.js'
],
output: {
path: resolve(__dirname, 'build'),//打包后的文件存放的地方
filename: "bundle.js",//打包后输出文件的文件名
publicPath: "/"
},
devServer: {
contentBase: resolve(__dirname, 'build'),
hot: true,
publicPath:'/'
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
'babel-loader',
],
exclude: /node_modules/
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
devtool: "cheap-eval-source-map",
};

入口文件中配置：

import {AppContainer} from 'react-hot-loader'
import Redbox from 'redbox-react'
const render =  (Component) => {
ReactDOM.render(
<AppContainer errorReporter={Redbox}>
<Component />
</AppContainer>,
document.querySelector('#odiv')
)
};
render(App);

if(module.hot) {
module.hot.accept('./app', () => {
render(App)
});
}

或者

const oEle = document.querySelector('#odiv');
render(
<AppContainer errorReporter={Redbox}>
<App />
</AppContainer>,
oEle
)

if (module.hot) {
module.hot.accept('./app', () => {
const NextApp = require('./app').default;
render(
<AppContainer errorReporter={Redbox}>
<NextApp />
</AppContainer>,
oEle
)
});
}