webpack配置react-hot-loader热加载局部更新

     有人会问 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 已经配置好了。没错，就是这么繁琐。