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

你可能感兴趣的:(webpack)