webpack热更新

首先要安装  工具

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);
    })
}