当前位置： 移动技术网 > IT编程>网页制作>CSS > webpack热更新

webpack热更新

2019年04月19日  | 移动技术网IT编程  | 我要评论

首先要安装  工具

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网