前言
在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