webpack - css-loader 选项中的 hashPrefix 是如何工作的?
问题描述
一直在关注 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
吗?
解决方案
来自:clarkdo的答案:https ://cmty.app/nuxt/nuxt.js/issues/c9566
默认情况下,
css-loader
从 webpack 请求生成哈希,例如:
genHash('components/G-TheThemeSwitcher.vue+TheThemeSwitcher__switch')
,
hashPrefix
用于添加前缀(如盐)以生成更独特的哈希,例如:
genHash('my-hashcomponents/G-TheThemeSwitcher.vue+TheThemeSwitcher__switch')
.
因此,指定哈希前缀会改变 Webpack 哈希函数的默认结果。您将看到的结果(localIdentName 之后的数字和字母)将始终是乱码,但是,当您添加哈希前缀时,这是一种自定义的乱码。
推荐阅读
- sql-server - Tombstone 清理失败,出现异常“当前操作无法完成,因为没有为同步配置数据库
- html - 导航栏图像未加载
- python - PySimpleGUI 表格元素可以自动滚动到底部吗?
- php - 如何在 php 中格式化此数组/json 中的数据
- ios - 如何在 Swift 中使用 Moya 实现 SSL 固定 - 公钥固定(不是证书固定)?
- .htaccess - 将 md5 哈希添加到 htaccess 中的 URL 以防止缓存
- delay - 如何在 1 小时的时间范围内按分钟数延迟 pine 脚本中的订单?
- javascript - onload 滚动到可滚动列表中的特定项目
- angular - Angular:如何从数据库数据(Asp net core Web API 数据)中以角度创建动态菜单
- visual-studio-code - VS Code 中不需要的数据包源