首先要安装 工具
cnpm i -d react-hot-loader@next
并且在.babelrc 文件下 修改
{
"presets":[
["es2015",{"loose":true}],
"react"
],
"plugins": ["react-hot-loader/babel"]
}
babelrc 依赖 react-hot-loader 的插件 ，所以要下载下来；
在webpack.config.js里设置
//如果 是开发环境 那么 应用开发 的 配置
if(isdev){
// 修改 入口文件 加入 react-hot-loader/patch 模块处理，
config.entry={
app:["react-hot-loader/patch",path.join(__dirname,"../client/app.js")]
}
//webpack-dev-server配置
config.devserver={
// 设置绑定的ip 0。0。0。0 是最合适的；
host:'0.0.0.0',
//输出的端口
port:'8888',
//dev-server引用的静态文件的路径,在此我们使用output打包编译过的文件
contentbase:path.join(__dirname,"../dist"),
//启动 hot-module-loader 热更新；
hot:true,
// 在编译过程中有错误，给予窗口提示
overlay:{
errors:true
},
// 重新设置 所有的 路径都要通过public路径去访问
publicpath:"/public",
// 然后 index 手动加上路径/public
historyapifallback:{
index:"/public/"
}
}
//如果是开发环境，那么插件里加一个热更新的插件
config.plugins.push(new webpack.hotmodulereplacementplugin())
}
引入webpack
//引入webpack
const webpack=require("webpack");
最后修改app.js
import react from "react";
import reactdom from "react-dom";
//引入 热加载容器
import {appcontainer} from "react-hot-loader"
import app from "./app.jsx";
const root=document.getelementbyid("root");
//定义 要 使用热更新容器的方法
const render=component=>{
reactdom.hydrate(,root)
};
//使用这个容器去家在原来的app
render(app)
//如果该模块存在，那么执行方法
if(module.hot){
// 模块接受处理一个 jsx文件的字符串， 去回调里处理这个jsx，并且更新到挂在元素内，
module.hot.accept("./app.jsx",()=>{
const nextapp=require("./app.jsx".default);
//使用热更新容器加载更新的内容；
render(nextapp);
})
}
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论