Webpack-React服务端渲染：在服务端模板中引入带哈希名的CSS文件

我来帮你搞定这个问题！在SSR项目里引入带哈希的打包资源确实不能硬写文件名，因为每次构建哈希都会变化。下面是我常用的两种可靠方案，结合你的项目情况来适配：

方案一：利用Webpack Manifest文件动态获取哈希文件名 #

Webpack可以生成一个manifest.json文件，里面记录了原始资源名和带哈希的最终文件名的映射关系，我们可以在服务端读取这个文件，把对应的CSS文件名传给EJS模板。

步骤1：配置Webpack生成Manifest #

先安装依赖npm install webpack-manifest-plugin --save-dev，然后在Webpack客户端配置中添加插件：

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
  // 其他打包配置...
  plugins: [
    new WebpackManifestPlugin({
      fileName: 'manifest.json',
      publicPath: '/dist/', // 你的静态资源发布根路径
    }),
  ],
};

打包后会在输出目录生成manifest.json，内容大概是这样：

{
  "main.css": "/dist/main.abc123.css",
  "main.js": "/dist/main.def456.js"
}

步骤2：服务端读取Manifest并传入EJS #

在你的服务端渲染逻辑（比如Express路由）中，读取manifest文件并提取CSS路径作为模板变量：

const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');

// 读取manifest文件
const manifest = JSON.parse(
  fs.readFileSync(path.resolve(__dirname, '../dist/manifest.json'), 'utf8')
);

app.get('*', (req, res) => {
  res.render('index', {
    // 把CSS路径传给EJS模板
    cssPath: manifest['main.css'],
  });
});

步骤3：EJS模板中动态引入CSS #

在src/server/views/index.ejs里，用传入的变量生成link标签：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>React Starter</title>
  <% if (cssPath) { %>
    <link rel="stylesheet" href="<%= cssPath %>">
  <% } %>
</head>
<body>
  <div id="root"><%= html %></div>
  <!-- 其他脚本引入... -->
</body>
</html>

方案二：直接从Webpack Stats中提取资源信息 #

如果不想用Manifest插件，也可以在构建时把Webpack的Stats信息保存成文件，服务端读取后提取CSS文件名：

步骤1：保存Webpack Stats #

在Webpack配置中开启Stats输出，或者在构建命令里直接导出：

// webpack.client.js中配置Stats输出
module.exports = {
  // 其他配置...
  stats: {
    assets: true,
    assetsSort: 'name',
  },
};

然后在构建脚本里添加命令：

webpack --config webpack.client.js --json > dist/stats.json

步骤2：服务端解析Stats获取CSS路径 #

const stats = JSON.parse(
  fs.readFileSync(path.resolve(__dirname, '../dist/stats.json'), 'utf8')
);
// 筛选出所有CSS资源
const cssAssets = stats.assets.filter(asset => asset.name.endsWith('.css'));
// 匹配主CSS文件（根据你的实际打包文件名调整）
const mainCss = cssAssets.find(asset => asset.name.includes('main'));

app.get('*', (req, res) => {
  res.render('index', {
    cssPath: `/dist/${mainCss.name}`,
  });
});

步骤3：EJS模板引入方式和方案一一致 #

同样用<%= cssPath %>动态生成link标签即可。

这两种方案都能完美解决带哈希CSS的动态引入问题，推荐用方案一，因为Manifest插件的方式更简洁直观，维护起来也更方便。

内容的提问来源于stack exchange，提问作者user7622857