有人会问 webpack-dev-server 已经是热加载了，能做到只要代码修改了页面也自动更新了，为什么在 react 项目还要安装 react-hot-loader 呢？其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件。
下面来说说怎么来配置 react-hot-loader 。
步骤1：
安装 react-hot-loader
npm install --save-dev react-hot-loader步骤2：
在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要写在entry 的最前面，如果有 babel-polyfill 就写在
babel-polyfill 的后面。
-
entry: [ -
'babel-polyfill', -
'react-hot-loader/patch', //设置这里 -
__dirname + '/app/main.js' -
]
步骤3：
在 webpack.config.js 中设置 devServer 的 hot 为 true
-
devServer: { -
contentBase: './build', -
port: '1188', -
historyApiFallback: true, -
inline: true, -
hot: true, //设置这里 -
},
步骤4：
在 .babelrc 里添加 plugin
-
{ -
"presets": ['es2015', 'react'], -
"plugins": ["react-hot-loader/babel"] //设置这里 -
}
步骤5：
在 webpack.config.js 的 plugins 里添加依赖的 HotModuleReplacement 插件
-
plugins: [ -
new HtmlWebpackPlugin({ -
template: __dirname + "/app/index.tmpl.html" -
}), -
new webpack.HotModuleReplacementPlugin() //设置这里 -
]
步骤6：
最后这个操作就是在页面的主入口，比如我的是 main.js 添加些代码
-
import React from 'react'; -
import ReactDOM from 'react-dom'; -
import Greeter from './greeter'; -
import "./main.css"; -
import { AppContainer } from 'react-hot-loader'; //设置这里 -
const render = (App) => { -
ReactDOM.render( -
<AppContainer> -
<App /> -
</AppContainer>, -
document.getElementById('root') -
) -
} -
render(Greeter) -
// Hot Module Replacement API -
if (module.hot) { -
module.hot.accept('./greeter', () => { -
render(require('./greeter').default) -
}) -
}
简写成这样试了一下也能成功
-
import React from 'react'; -
import ReactDOM from 'react-dom'; -
import Greeter from './greeter'; -
import "./main.css"; -
ReactDOM.render( -
<App />, -
document.getElementById('root') -
) -
if (module.hot) { -
module.hot.accept() -
}
按顺序做完上面6个步骤，恭喜你，React 的 react-hot-loader 已经配置好了。没错，就是这么繁琐。