首先要安装 工具
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/index.html"
- }
- }
- // 如果是开发环境, 那么插件里加一个热更新的插件
- 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);
- })
- }
来源: https://www.2cto.com/kf/201808/766183.html