如何修改Preact的Webpack CSS Loader配置生成短哈希类名

直接在项目根目录创建/修改preact.config.js，写入以下代码：

export default (config, env, helpers) => {
  // 获取css-loader的配置规则
  const { rule } = helpers.getLoadersByName(config, 'css-loader')[0];
  const cssLoaderOptions = rule.options;

  // 覆盖CSS模块的类名生成规则
  cssLoaderOptions.modules = {
    ...cssLoaderOptions.modules,
    // 仅生成5位base64哈希类名，无组件/文件名前缀
    localIdentName: '[hash:base64:5]',
    // 禁用默认的带组件名的类名生成逻辑
    namedExport: false,
    // 保持驼峰式导出（可选，不影响类名生成）
    exportLocalsConvention: 'camelCaseOnly'
  };
};

关键配置说明 #

• localIdentName: '[hash:base64:5]'：指定类名仅由5位base64哈希组成，彻底移除组件名、文件名等额外标识。如果项目规模极大，可将5改为6进一步降低冲突概率。
• 借助Preact CLI提供的helpers.getLoadersByName工具，精准定位css-loader配置，无需手动遍历复杂的Webpack规则结构。
• 保留原css-loader的其他模块配置，仅修改类名生成逻辑，避免破坏现有CSS模块的正常运行。

验证方式 #

启动开发服务或执行构建命令后，查看浏览器元素面板或打包后的CSS文件，确认类名已变为纯哈希格式。

内容的提问来源于stack exchange，提问作者Anna Drzewiecki