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)
    });
  }