linux上热编译react,使用Webpack配置React项目中的热更新

本文基于 create-react-app 脚手架进行配置

首先安装插件 react-hot-loader ,安装方法 npm i --save-dev react-hot-loader

然后在config文件夹下的webpack.config.dev.js文件中，module.exports entry: []，第一行添加以下代码:

// 开启react代码的模块热替换(HMR)

'react-hot-loader/patch',

// 为webpack-dev-server的环境打包好运行代码

// 然后连接到指定服务器域名与端口, 这里的端口为自己项目的端口

'webpack-dev-server/client?http://localhost:3000/',

// 为热替换(HMR)打包好运行代码

// only- 意味着只有成功更新运行代码才会执行热替换(HMR)

'webpack/hot/only-dev-server',

然后在项目入口文件如Router.js或者App.js中添加如下代码

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import Router from './router';

import store from './store';

import { AppContainer } from 'react-hot-loader';

import { Provider } from 'react-redux';

import registerServiceWorker from './registerServiceWorker';

//热更新实现

const render = Component => {

ReactDOM.render(

//绑定redux、热加载

,

document.getElementById('root'),

)

}

render(Router);

// Webpack Hot Module Replacement API

if (module.hot) {

module.hot.accept('./router', () => {

render(Router);

})

}

registerServiceWorker();

具体项目实现可以参照我的GitHub项目 react-redux-admin , 一个redux的脚手架