react-hot-loader 的配置【局部刷新】--{create-react-app}
1.安装create-react-app
npm install -g create-react-app
2.创建项目
create-react-app my-app
配置
1.弹出配置文件
npm run eject
2.安装React Hot Loader
npm install --save-dev react-hot-loader@next
3.添加babel插件
1 2 3 4 | "plugins": [ "react-hot-loader/babel" ] |
最终package.json里的babel配置如下:
1 2 3 4 5 6 7 8 9 10 | "babel": { "presets": [ "react-app", "stage-1" ], "plugins": [ "react-hot-loader/babel" ] }, |
4. webpack.config.dev.js 添加如下入口
'react-hot-loader/patch'
5. 修改index.js入口文件
import { AppContainer } from 'react-hot-loader';
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component/>
</AppContainer>,
document.getElementById('root')
);
};
render(App);
// 模块热替换的 API
if (module.hot) {
module.hot.accept('./App', () => {
render(App)
});
}