rollup-plugin-css-only 目前还没有支持对生成的文件名添加基于文件内容的 hash 值,而这个操作在 Web 前端中又非常的常见和必要。

因此只能采用折中的解决办法了。

import css from 'rollup-plugin-css-only';
import crypto from 'crypto';

function emitCSS(css, styles, bundle) {
  const md5 = crypto.createHash('md5').update(css).digest('hex').substr(0, 8);
  const filename = `bundle.${md5}.css`;
  // bundle 中添加 css 文件信息
  bundle[filename] = { type: 'asset', fileName: filename, source: css };
}

export default {
  input: 'src/main.js',
  output: {
    sourcemap: false,
    format: 'iife',
    name: 'app',
    entryFileNames: production ? 'bundle.[hash].js' : 'bundle.js',
    chunkFileNames: production ? '[name].[hash].js' : '[name].js',
    dir: 'build',
  },
  plugins: [
    css({
      output: production ? emitCSS : 'bundle.css',
    }),
  ],
};