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