css-loader 选项中的 hashPrefix 应该如何工作？

Question

一直在关注 css-loader hashPrefix 上的示例。

webpack 配置设置是

{
  test: /\.css$/,
  exclude: path.resolve(__dirname, 'node_modules'),
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        hashPrefix: 'hash',
      }
    }
  ]
}

并且输出 css 键是

big: "app__big--iUuZi"
env: "app__env--3ylTw"
header: "app__header--3w1O7"

我期待的是

big: "hash_app__big--iUuZi"
env: "hash_app__env--3ylTw"
header: "hash_app__header--3w1O7"

有人可以澄清 hashPrefix 吗？

Answer 1

hashPrefix 用于添加前缀（如盐）以生成更独特的哈希值，如

在此处找到：https://cmty.app/nuxt/nuxt.js/issues/c9566

Answer 2

来自：clarkdo 的回答：https://cmty.app/nuxt/nuxt.js/issues/c9566

By default, css-loader generates hash from the webpack request like:

genHash('components/G-TheThemeSwitcher.vue+TheThemeSwitcher__switch'),

hashPrefix is for adding a prefix (like salt) for generating more unique hash like:

genHash('my-hashcomponents/G-TheThemeSwitcher.vue+TheThemeSwitcher__switch').

因此，指定哈希前缀将更改 Webpack 哈希函数的默认结果。您将看到的结果（localIdentName 之后的数字和字母）将始终是乱码，但是，当您添加哈希前缀时，这是一种自定义乱码。

css-loader 选项中的 hashPrefix 应该如何工作？

How is the hashPrefix in the css-loader options suppose to work?

webpack

css-loader