有人會問 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：

devServer: {
        contentBase: './build', 
        port: '1188', 
        historyApiFallback: true,  
        inline: true,  
        hot: true,  //設定這裡
    },

在 .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() //設定這裡
]

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 已經配置好了。沒錯，就是這麼繁瑣。