时间戳

首页 > 解决方案 > 我可以将 webpack 配置为在我的顶级 index.html 中组合和缓存 bust css 文件吗？

css - 我可以将 webpack 配置为在我的顶级 index.html 中组合和缓存 bust css 文件吗？

问题描述

除了在顶级 index.html 中引用的主 CSS 文件外，我们有一个非常好的 prod 管道，如下所示：

index.html

... 
<link rel="stylesheet" href="./_dist_/styles.css" />

... webpack js bundles to make our app work ...

全局styles.css 有@imports：

styles.css

@import './_foo.css'
@import './_bar.css'

...

我想组合所有顶级css文件（例如styles.css、foo.css、bar.css），对其进行版本化，并将链接重写为index.html：

<link ref="stylesheet" href="./_dist_/combined.[hash].css" />

我见过的所有文档（css-loader、mini-css-extract-plugin）都更多地关注支持从 JS 级别导入 CSS，而不是从顶级 HTML/CSS 导入。

这是我可以配置 webpack 做的事情吗？

标签： csswebpack

解决方案

推荐阅读