方法一实现热重载

// @ts-nocheck

// 方法一实现热重载

const path = require('path');

const express = require('express')

const webpack = require('webpack')

const webpackConfig = require('./webpack.config')

const webpackHotMiddleware = require('webpack-hot-middleware');

const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();

const getProxy = require('./src/proxy')

const DIST = path.join(__dirname, 'dist');

const compiler = webpack(webpackConfig);

const hotMiddleware = webpackHotMiddleware(compiler)

app.use(webpackDevMiddleware(compiler, {

    publicPath: webpackConfig.output.publicPath,

    // watchOptions: {

    //     aggregateTimeout: 300,

    //   },

    // quiet: true,

}))

app.use(hotMiddleware);

getProxy()

app.get("*", (req, res, next) => {

    const filename = path.join(DIST, 'index.html');

    compiler.outputFileSystem.readFile(filename, (err, result) => {

        if (err) {

            return next(err)

        }

        res.set('Content-Type', "text/event-stream")

        res.send(result)

        res.end()

    })

})

const PORT = 9292

app.listen(PORT, () => {

    console.log(`端口${PORT}打开成功...`);

})

前提：

根组件引入 import { hot } from 'react-hot-loader/root'

  配置 entry: ['webpack-hot-middleware/client',path.resolve(__dirname,"./src/index.tsx")],