使用 rollup 和 roll-plugin-postcss 时如何向生成的 css 文件添加哈希答案

【问题标题】：How to add hash to the generated css file when using rollup and roll-plugin-postcss使用 rollup 和 roll-plugin-postcss 时如何向生成的 css 文件添加哈希
【发布时间】：2020-06-14 19:25:35
【问题描述】：

我正在使用汇总来捆绑代码。为了捆绑 css，我使用了 rollup-plugin-postcss。我无法弄清楚如何将哈希添加到生成的 css 文件中。这是我的 postCss 配置：

        postcss({
            plugins: [autoprefixer()],
            sourceMap: !isProd,
            extract: `${BUILD_DIR}/styles/index.css`,
            modules: true,
            minimize: isProd,
            use: ['sass'],
            extensions: ['.scss'],
            inject: false,
            autoModules: false,
        }),

有了这个配置，我可以在构建目录中生成index.css，但我想生成index-[hash_string].css

【问题讨论】：

看起来不支持开箱即用，尽管有一个开放的 PR 可以添加该功能：github.com/egoist/rollup-plugin-postcss/pull/226

标签： rollup postcss css-modules

【解决方案1】：

如果您可以为 JS 和 CSS 包使用相同的名称，则可以实现此目的。

要点是你的 JS 包可以自动用哈希命名，你的 CSS 包可以自动获得相同的名称：

JS：使用支持[hash] 占位符的entryFileNames。
CSS：如果您没有在extract 选项中指定自定义文件名，它将是“extract CSS to the same location where JS file is generated but with .css extension”。

output: {
  // ...
  dir: `${BUILD_DIR}/styles`,
  entryFileNames: "[name].[hash].js",
},
plugins: [
  postcss({
    extract: true
    // ...
  }),
],

【讨论】：