const axios = require('axios');
const webpack = require('webpack');
const path = require('path');
const MemoryFs = require('memory-fs');
const ReactDOMServer = require('react-dom/server');
const rootDir = path.join(__dirname, '../..');
const serverConfig = require(path.join(rootDir, 'build/webpack.config.server.js'));
const getTemplate = () => {
return new Promise((resolve, reject) => {
axios.get('http://localhost:3333/public/index.html')
.then((res) => {
resolve(res.data);
})
.catch(reject);
})
};
const mfs = new MemoryFs();
const Module = module.constructor;
let serverBundle;
const serverCompiler = webpack(serverConfig);
serverCompiler.outputFileSystem = mfs;
serverCompiler.watch({}, (err, state) => {
if (err) {
throw err;
}
state = state.toJson();
state.errors.forEach(console.error);
state.warnings.forEach(console.warn);
const bundlePath = path.join(
serverConfig.output.path,
serverConfig.output.filename
);
const bundle = mfs.readFileSync(bundlePath, 'utf-8');
console.log(bundle);
const m = new Module();
m._compile(bundle);
serverBundle = m.exports.default;
});
module.exports = function (app) {
app.get('*', function (req, res) {
getTemplate().then((template) => {
const content = ReactDOMServer.renderToString(serverBundle);
res.send(template.replace('<!--app-->', content));
})
})
};这里和老师的代码完全一致;但是打印(console.log(bundle);)的结果是base64编码的,导致运行报错,一直没找到原因。
哦,我知道了,我加了一个devtool:inline-source-map;其实是读取的对的,但是会报

好吧,原来是视频没看完