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 的后面。

1. entry: [
2. 'babel-polyfill',
3. 'react-hot-loader/patch', //设置这里
4. __dirname + '/app/main.js'
5. ]

步骤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 App 
     
     from 
     
     './app';
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import 
     
     "./main.css";
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     ReactDOM.render(
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <App />,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         document.getElementById('root')
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     )
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     if (module.hot) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         module.hot.accept()
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

按顺序做完上面6个步骤，恭喜你，React 的 react-hot-loader 已经配置好了。