Webpack-React与服务器端渲染:使用哈希名称链接到服务器模板中的CSS文件

6 css server-side reactjs webpack

我正在准备一个用于从头开始做出反应的入门程序,这是代码:https : //github.com/antondc/react-starter

我设法使用css模块和更少的模块为客户端和服务器设置捆绑,现在我使用服务器端渲染。我正在使用js模板来做到这一点:

// src/server/views/index.ejs
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INDEX.EJS</title>
    <link rel="stylesheet" type="text/css" href="assets/index.css">
</head>
<body>
    <div id="app"></div>
    <script src="/assets/bundle.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

如您所见,css文件的链接在那里被编码。但是在我的Webpack配置中,我将此文件名进行了哈希处理,因为当我在开发中更新代码时,我想防止浏览器缓存。

我想知道如何在那里链接css文件。现在在模板中href="assets/index.css,但是css文件在/dist/assets/d47e.css

如果可以做类似的事情href="assets/*.css,那是很好的,但是不可能的,那么解决这种问题的常用方法是什么?

谢谢!

jpd*_*rre -1

您可以使用HTMLWebpackPlugin生成一个 HTML 文件,其中将插入 JS 和 CSS 输出。