// @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}打开成功...`);
})
前提:
1.根组件要引入
import { hot } from 'react-hot-loader/root'
2.入口要配置
entry: ['webpack-hot-middleware/client',path.resolve(__dirname,"./src/index.tsx")],