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

})

}