提问人：Anna Drzewiecki 提问时间：7/4/2023 更新时间：7/5/2023 访问量：76
Preact 更改 webpack css 加载器配置
Preact change webpack css loader config
问：
我想将 Preact 上的 webpack 配置更改为仅具有散列类名，如果这是一种安全的做法，请将它们缩短。
css 加载器在我的 preact 项目上运行良好，但有时该组件在类名中可见，即使模块 .css 文件仅由该组件引用。
我遇到了这个文档，但我没有足够的经验来让它工作，我正在寻找在我的preact.config.js中编写的特定代码
答：
1赞
rschristian
7/5/2023
#1
以下配置应该是您想要的，但如果您有任何问题，请告诉我：
// preact.config.js
/**
* @param {import('preact-cli').Config} config - original webpack config
* @param {import('preact-cli').Env} env - current environment and options pass to the CLI
* @param {import('preact-cli').Helpers} helpers - object with useful helpers for working with the webpack config
*/
export default (config, env, helpers) => {
const { loader: cssLoader } = helpers.getLoadersByName(config, 'css-loader')[0];
cssLoader.options.modules.localIdentName = '[hash:base64:5]';
}
这里的一般思路是，我们得到了 using 的配置助手（记录在这里），但具体来说是第一个;第一个是用于 CSS 模块，或者您创作的 CSS。第二个实例适用于您创作的所有其他 CSS，它们不会被哈希处理，因此我们将忽略它并只获取第一个 （）。css-loaderpreact-clicomponents/routes/css-loader[0]
然后，我们只需更新选项。默认值可以在这里找到，我们只需将其更改为仅使用哈希值，从而删除部分。local__
关于缩短哈希值，我不会。如果时间越短，就会大大增加在缓存中触发冲突的机会。
评论
preact-cli