官网原话：React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React components. 有人会问 webpack-dev-server 已经是热加载了，能做到只要代码修改了页面也自动更新了，为什么在 react 项目还要安装 react-hot-loader 呢？其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。 简单的讲，就是使用 react 编写代码时，能让修改的部分自动刷新。但这和自动刷新网页是不同的，因为 hot-loader 并不会刷新网页，而仅仅是替换你修改的部分，也就是上面所说的 without losing state。 下面来说说怎么来配置 react-hot-loader 。 我是通过官方的create-react-app创建的项目的修改 步骤1： ~~~ 安装 react-hot-loader npm install --save-dev react-hot-loader ~~~ 步骤2：在 webpack.config.dev.js 的 entry 值里加上 react-hot-loader/patch，一定要写在entry 的最前面，如果有 babel-polyfill 就写在 babel-polyfill 的后面。 ~~~ entry: [ // We ship a few polyfills by default: require.resolve('./polyfills'), // add react-hot-loaders by algate require.resolve('react-hot-loader/patch'), ] ~~~ 网上好多人都没有写require.resolve()，直接把上述代码放进去也ok哦 步骤3： 最后这个操作就是在页面的主入口，比如我的是 index.js 添加些代码 ~~~ import App from './page/App'; import { AppContainer } from 'react-hot-loader'; // 新添加 const render = (App) => { ReactDOM.render( <AppContainer><App /></AppContainer>, document.getElementById('root') ); } render(App) // Hot Module Replacement API if (module.hot) { module.hot.accept('./page/App', () => { render(App) }) } ~~~ 大功告成，去页面实践下吧！