踩坑一：接上回说到webpack打包发布脚本到npm上，代码根本未变，再次打开vscode诡异的事情发生了，编译后一直报错
// webpack4=>5 要新增这个
// 因为这一个插件我郁闷了好一会（脑瓜子嗡嗡的，前几天我学的是假的？为啥没遇到）
new webpack.ProvidePlugin({
process: "process/browser",
}),
回归正题：
1、服务端渲染使用webpack打包
直接上代码
if (typeof window === "undefined") {
global.window = {};
global.self = {};
}
const express = require("express");
const fs = require("fs");
const path = require("path");
const { renderToString } = require("react-dom/server");
const SSR = require("../dist/search-serve");
// 设置端口
// 随便mock啥数据都行
const data=require("./data.json")
const template=fs.readFileSync(path.join(__dirname,'../dist/search.html'),'utf8');
const server = (port) => {
const app = express();
// 设置静态目录
app.use(express.static("dist"));
// 设置路由
app.get("/search", (req, res) => {
const html = renderMarkup(renderToString(SSR));
res.status(200).send(html);
});
app.listen(port, () => {
console.log("server listening on port" , port);
});
};
server(process.env.PORT || 3000);
const renderMarkup = (str) => {
const dataStr=JSON.stringify(data)
// 这里使用占位符替换
// 不直接使用html模板写入是为了解决样式失效的问题
return template.replace('<!--HTML_REPLACE-->',str).replace('<!--DATA-->',`<script>window.__initial_data=${dataStr}</script>`);
};
// html中需要预留占位符
<body>
<div id="root"><!--HTML_REPLACE--> <!--DATA--></div>
</body>
踩坑二：因为对ssr不了解，样式压根没加载，我还研究加载器研究了半天（无语），后来发现压根没请求样式文件，才找到了占位符的方法
const logo = require("./images/loaders.png").default;
踩坑三：图片不见了，这样的图片引入代码我是第一次写（真下饭呀）
2、关于stats
我使用的是webpack5，所以 "friendly-errors-webpack-plugin" 及 stats 都用不到了，编译结果及问题可以很清晰的了解到，所以这些我也没过多的关注
关于踩坑我有话说：
1、踩坑不可怕，可怕的是绕行不解决（dev的时候，pro当然是快速解决）
2、关注错误提示，精准的定位错误原因
（因踩坑浪费时间较多，今天就到这吧！）
github地址：github.com/838216870/w…
