webpack模块热替换教程

我们用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')
    )
}