官網原話：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) }) } ~~~ 大功告成，去頁面實踐下吧！