我们用vue或者react脚手架时,我们会发现,我们修改代码时,浏览器不会刷新,更改对应的部分会自动刷新,这就是模块热替换。下面主要介绍webpack和react-hot-loader。
webpack模块热替换
package.json
增加 --hot
"start": "webpack-dev-server --config webpack.dev.config.js --color --progress --hot"
src/index.js 增加module.hot.accept(),如下。当模块更新的时候,通知index.js。
import React from 'react'; import ReactDom from 'react-dom'; import getRouter from './router/router'; if (module.hot) { module.hot.accept(); } ReactDom.render( getRouter(), document.getElementById('app'));
此时我们执行npm start,打开浏览器,修改对应的代码,会发现页面不刷新,内容也会更新。
react-hot-loader
其实以上的配置对react模块的支持不是很友好。如果react当中涉及到state,state里面有对应的值,如果通过以上的配置进行模块热替换,state会重置为初始值,这不是我们想要的。
webpack-dev-server与react-hot-loader两者的热替换有什么区别?
区别在于webpack-dev-server自己的--hot模式只能即时刷新页面,但状态保存不住。因为React有一些自己语法(JSX)是HotModuleReplacementPlugin搞不定的。
而react-hot-loader在--hot基础上做了额外的处理,来保证状态可以存下来。
因此,react-hot-loader是基于webpack-dev-server的,我们还是要安装webpack-dev-server。
1.安装依赖
npm install react-hot-loader@next --save-dev
2..babelrc 增加 react-hot-loader/babel
{ "presets": [ "es2015", "react", "stage-0" ], "plugins": [ "react-hot-loader/babel" ] }
3.src/index.js修改如下
import React from 'react'; import ReactDom from 'react-dom'; import {AppContainer} from 'react-hot-loader'; import getRouter from './router/router'; /*初始化*/ renderWithHotReload(getRouter()); /*热更新*/ if (module.hot) { module.hot.accept('./router/router', () => { const getRouter = require('./router/router').default; renderWithHotReload(getRouter()); }); } function renderWithHotReload(RootElement) { ReactDom.render( <AppContainer> {RootElement} </AppContainer>, document.getElementById('app') ) }