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',
}),
],
};