APTX博客

  • ACGN
  • Coding
  • DevOps
  • Daily
  • Share
  • Bangumi
APTX Blog
A Moe Blog Set Up By ミズキ
  1. 首页
  2. Coding
  3. 正文

React 配合后端热更新

2021年6月18日 1836点热度 1人点赞 4条评论

前言

在很多情况下,我们使用脚手架开发前端项目时会启动两个服务器使用proxy进行代理,但是这样显然是不自然的,有强迫症的我肯定是无法接受这一点。

目前来看,React.js的create-react-app以及Vue.js的vue-cli脚手架,目前都是封装的基于webpack打包的,所以我们完全可以使用webpack官方提供的中间件进行热开发webpack-dev-middleware再配合社区提供的webpack-hot-middleware,而不是使用webpack-dev-server的同时启动我们自己的服务器,然后再配置代理。

但是,我们不想修改cra官方为我们提供的配置,因为修改它我们需要enject会使我们的目录解构发生混乱,不是很大的项目时仅为配置一个这个去enject是非常低效的行为。索性我们可以曲线救国一下

双中间件

双中间件即webpack-dev-middleware配合webpack-hot-middleware,

因为cra给我们的webpack默认配置就有HotModuleReplacementPlugin所以我们只需要加上entry就行了

process.env.NODE_ENV = 'development';
const webpack = require('webpack');
const express = require('express');
const configFactory = require('react-scripts/config/webpack.config');
const webpackDev = require("webpack-dev-middleware");

let config = configFactory('development');
config.entry = [config.entry, 'webpack-hot-middleware/client'];

const compiler = webpack(config);
const app = express();

app.use(webpackDev(compiler))
app.use(require("webpack-hot-middleware")(compiler));

app.listen(3000);

koa-webpack

由于我是koa用户,况且社区为Koa封装好了这两个中间件(webpack-dev-middleware and webpack-hot-client)后一个是前面说的webpack-hot-middle的封装,他为我们提供了自动添加配置的能力

let config = configFactory('development');
config.entry = [config.entry, 'webpack-hot-middleware/client'];
const middleware = await koaWebpack({ compiler, hotClient: { autoConfigure: false } });
const app = new Koa();
app.use(middleware);
app.listen(3000, () => console.log('http://localhost:3000'));

craco

如果使用craco那就更简单了,craco提供了暴露webpack配置的api,同时我们也可以使用他的便利

const Koa = require('koa')
const koaWebpack = require('koa-webpack')
const cracoConfig = require('./craco.config')
const {
  createWebpackDevConfig
} = require('@craco/craco')



;(async () => {
  const config = createWebpackDevConfig(cracoConfig)
  const middleware = await koaWebpack({
    config
  })
  
  const app = new Koa()

  app.use(middleware)

  app.listen(3000, () => console.log('http://localhost:3000'))
})()

然后我们直接在./craco.config把多余的插件删了

module.exports = {
  webpack: {
    plugins: {
      remove: ['HotModuleReplacementPlugin']
    }
  }
}
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: Block RIP ST Web 插件 服务器
最后更新:2021年7月4日

神楽坂 みずき

萌萌萌,好萌!

点赞
< 上一篇
下一篇 >

文章评论

  • 多吉

    嗨,从可乐探针找到作者的博客。感觉瞬间眼前一亮,真的特别好的主题,可惜没看到任何开源的link,路过走过点个赞!

    2021年7月13日
    回复
    • 神楽坂 みずき

      @多吉 谢谢支持,有人喜欢的话我可能会修改下开源,不过这个代码写的确实比较稀烂

      2021年7月14日
      回复
  • jonkxg84572

    想问这个blog是什么搭的呀,好看啊

    2021年7月13日
    回复
    • 神楽坂 みずき

      @jonkxg84572 现在是WordPress Restful API作后端,前端是Vue + SSR,整体样式其实是大部分随便抄的摇曳百合动画的网站(逃)

      2021年7月14日
      回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    神楽坂 みずき

    萌萌萌,好萌!

    搜索
    最新 热点 随机
    最新 热点 随机
    站点域名变更通知 私たちの居る理由 《サクラノ詩》VI 章 直哉与蓝对话 从《AMRITA》到《HELLO WORLD》── 野﨑まど世界观下的个体与世界的真实感 几种云端 VSCode/类 VSCode 方案对比与部署 Summer Pockets REFLECTION BLUE 豪華限定版 早期予約色紙付き/通販・店舗対応版
    #动画#《多田君不恋爱》观后感:内心永远是彩虹色! 我没有经验,还真是抱歉呢 0.99美元购买价值49刀的Google Home Mini Golang手动交叉编译Caddy v2 LoveLive:μ's 43.6 G无损音乐歌曲分享 斐讯N1电视盒子推荐固件及常用软件分享
    标签聚合
    OI ST 动漫 HTML C/C++ C++ 洛谷 日常
    分类
    • ACGN
    • Coding
    • Daily
    • DevOps
    • OI
    • Share

    COPYRIGHT © 2017-2022 APTX博客. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang