使用汇总的散列文件名答案

【问题标题】：Hashed file names using Rollup使用汇总的散列文件名
【发布时间】：2020-02-07 14:49:17
【问题描述】：

我对打包工具和 rollup 很陌生。在为生产构建时，在rollup.config.js 中有条件地散列文件名的最佳方法是什么，同时保存index.html 以引用新的.css 和.js 散列版本？

我在docs 中看到了这个，但我想我不知道如何根据dev/prod 设置有条件地设置这些选项？

output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
       // entryFileNames : 'bundle[hash].js
    },

还是使用rollup-plugin-hash 是更好的解决方案？仍然不确定更新index.html 的最佳做法是什么（清单文件选项提供了什么？）

【问题讨论】：

只是一个评论。如果同时使用 entryFileNames 和文件选项，则 entryFileNames 将被忽略。您必须使用 dir 选项来指定基本文件夹名称。

标签： hash rollupjs

【解决方案1】：

您可以使用@rollup/plugin-html 之类的插件来生成引用散列文件名的 html 文件。

也可以使用rollup-plugin-manifest 生成包含这些散列文件名的 JSON 文件。
当您由于某种原因无法使用汇总生成 HTML 时，这很有用。

由于 Rollup 配置文件只是 Javascript，因此您可以根据 dev/prod 设置包含一些 if statements that return different results。

const isProduction = process.env.NODE_ENV === 'production';

export default {
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    entryFileName: isProduction ? 'bundle[hash].js' : 'public/build/bundle.js',
    dir: './',
  }
};

【讨论】：