React 配合后端热更新

前言

在很多情况下，我们使用脚手架开发前端项目时会启动两个服务器使用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']
    }
  }
}