Hot-Module-Replacement详细配置说明

前言

在webpack工程中要实现热加载，就是只更新局部的修改，我们可以使用Hot-Module-Replacement。

安装依赖

npm install --save-dev react-hot-loader

修改.babelrc配置文件

 {
        plugins: ["react-hot-loader/babel"]
    }

开启webpack-dev-server的HMR

因为Hot-Module-Replacement的热更新是依赖于webpack-dev-server，后者是在打包文件改变时更新打包文件或者reload刷新整个页面，HRM是只更新修改的部分 。

1、配置webpakc-dev-server

webpack.dev.config.js：

    devServer:{
        port:8080,
        contentBase:path.join(__dirname,'./dist'),//设置url的根目录，如果不设置，则默认是指向项目根目录
        historyApiFallback : true,//让所有404的页面定位到index.html
        hotOnly:true
    },

hotOnly:true 表示只会对可以热更新的部分进行热更新

这里要对HRM的冒泡原理了解一下：教你怎么使用 webpack3 的 HMR 模块热加载

2、安装对应的插件

webpack.dev.config.js：

    plugins: [
        new webpack.NamedModulesPlugin(), //用于启动HMR时可以显示模块的相对路径
        new webpack.HotModuleReplacementPlugin(),   //hot module replacement 启动模块热替换的插件
    ]

3、入口文件配置接受热更新

if (module.hot) {
module.hot.accept(() => {
   // alert('work')
    const NextApp = require('component/App/App').default;
    renderWithHotReload(App);
    });
}

我原来在module.hot.accept后面接收了component/App/App，然后模块的冒泡收到了影响，不能直接冒泡到上一级，而是冒泡到最上面的入口文件，因此无法进行热更新，把接收的路径去掉就可以了。

4、配置命令

package.json:

"dev": "webpack-dev-server --open --config webpack.dev.config.js"

现在，就可以愉快的使用热更新啦~~~当然，如果想要每次热更新组件里的state被保存下来，我们可以使用react-hot-loader