xl-aya/config/webpack-dev.js

ssr 工具库

const path = require('path');
const fs = require('fs');
const { merge } = require('webpack-merge');
const ssrConfig = require('./webpack-ssr');
const ReactDOMServer = require('react-dom/server');
const {ssr} = require('xl-aya');

const devConfig = {
    mode: "development",
    devtool: "source-map",
    devServer: {
        port: '80',
        onAfterSetupMiddleware: (devServer) => {
            if (!devServer) {
                throw new Error('webpack-dev-server is not defined');
            }

            const csrJsFilePath = '/dist/csr.js';
            global.SSR_ENVIRONMENT = 'node';

            devServer.app.get(csrJsFilePath, function (req, res) {
                res.end(fs.readFileSync(path.join(__dirname, '../../dist/csr.js')));
            });
            devServer.app.get('/*', function (req, res) {
                const pathname = req.path;
                const app = require(path.join(__dirname, '../../dist/ssr')).default;
                const ctx = Object.assign(req, {
                    common: {
                        path: pathname,
                        query: req.query,
                        params: {},
                    }
                });
                ssr(pathname, app, csrJsFilePath, 'ssr', ctx, ReactDOMServer).then(html => {
                    res.end(html);
                }).catch(e => {
                    console.error(e);
                    res.end('ssr 报错：', e.message || '');
                });
            });
        }
    },
};

module.exports = merge(ssrConfig, devConfig);