webpack css-loader localIdent名称哈希长度 [英] webpack css-loader localIdent name hash length

问题描述

我使用 webpack 和 css-loader ，并在我的 css-loader config我使用这些选项：

  options：{
 importLoaders：1，
模块：true，
 localIdentName：'[hash：base64：3]'
} 
  

就像你看到的那样，很显然我希望我所有的班级名称都有3个字符，而且在完成构建后，我的愿望会变成现实，但有一个非常大的问题。

某些类名称具有相同的名称！ （冲突！）

例如：

  ._1mk {/ * dev名称是.home * / 
颜色：红色; 
} / *第90行* / 
  

和

  ._ 1mk {/ * dev名称是.news * / 
颜色：蓝色; 
} 
  

这是个大问题，但是当我使用 [hash：base64：5] 一切都会好的，每个类都有自己的散列名称，不会有任何冲突。

4小时，并看到所有的开发人员使用数字5作为其配置的哈希长度更少。我不知道为什么！我计算出三个长度中的64个字符[az] [AZ] [0-9] [ - ，_]可以有262144个不同的单词，所以为什么它不能有一些不同的名字？

我如何解决这个冲突？真的应该错过3号吗？并使用5像其他人一样？

解决方案

最后我找到正确的方法，它是 hash ，而不是 randomNaming 函数。这是做散列，所以它是如此明显在很短的长度与广泛的命名，也许它会产生碰撞。所以我编写自己的 webpack 命名函数，并使用 webpack 配置文件中的变量和函数顶部。这些是我的解决方案的步骤：

首先，缓存 cache 和 queue的两个变量。缓存以便轻松访问 LocalName 及其新的 randomName ，并保留包含所有新随机名称以避免的变量条目的队列碰撞。

  let q = []，
 cache = {}; 
  

第二，我们声明 randomNaming 函数。我知道，也许它不是很优化，但效果很好。导出文件非常棒，没有任何冲突。

 函数randomNaming（length，limit）{
 let result ='' ，
 chars ='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_'，
 / *所有有效字符* / 
 fchars ='abcdefghjklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_'; 
 / *所有有效的第一个字符* / 
 
 do {
 if（q.length> =（52 * Math.pow（64，limit  -  1））& & limit> =长度）{
返回'OutOfPossibility'; 
} else if（q.length> =（52 * Math.pow（64，limit-1））&& limit< length）{
 ++ limit; 
} 
 result =''; 
 result + = fchars [Math.floor（Math.random（）* fchars.length）]; 
 for（let i = limit  -  1; i> 0; --i）{
 result + = chars [Math.floor（Math.random（）* chars.length）]; 
} 
} while（q.includes（result））; 
 q.push（result）; / *在下一次函数调用时避免冲突* / 
返回结果; 
 
 $ / code> 

第三，在 css-loader webpack config我使用 getLocalIdent 不是 localIdentName $ b $ $ p $ getLocalIdent :( loaderContext，localIdentName，localName，options）=> {
var randName = randomNaming（3,2）;
if（localName.match（/ ^ i- / i））{
randName =`i - $ {randName}`;
} else if（localName.match（/ ^ i_ / i））{
randName =`i_`;
} else {
randName =`$ {randName}`;
}
if（typeof cache [localName] =='undefined'）{
cache [localName] = randName;
return cache [localName];
} else {
return cache [localName];






$现在所有的名字都被散列了， $ c> CSS 文件的卷大小最小。而 HTML 的体重很轻。

I use webpack and css-loader, and in my css-loader config I use these options:

options: {
    importLoaders: 1,
    modules: true,
    localIdentName: '[hash:base64:3]'
}

Just like you see, it is obvious that I desire all of my class name will have 3 characters, and after build absolutely my desire come true but there is a very big issue.

Some class names has same name! (conflict!)

for example:

._1mk { /*dev name was .home*/
   color: red;
} /*line 90*/

and

._1mk { /*dev name was .news*/
   color: blue;
}

This is a big issue, but when I use [hash:base64:5] everything would be ok and each class has its own hash name without any conflict.

I search this issue about 4 hours and saw all developers use number 5 as less of length of hash for their config. I don't know why! I calculate that 64 characters [a-z][A-Z][0-9][-,_] in three length can has 262144 different words, so why it can not some different names?

how can I settle this conflict? Really should I miss the number 3 ? and use 5 like others?

解决方案

finally I find the right way, it is hash, not randomNamingfunction. this is made to hash so it is so obviously in short length with vast naming maybe it produce collision. so I write my own webpack naming function and use the variables and the function top on webpack config file. these are steps of my solution:

At first, two variables for cache and queue. cache for easy accessing to LocalName and its new randomName and queue for holding variable entries that involve all new random names for avoiding collision.

let q = [],
    cache = {};

At second, we declare randomNaming function. I know, maybe it is not very optimize but it works well. the export file is awesome without any collision.

function randomNaming(length,limit) {
    let result = '',
        chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_',
        /*All valid chars*/
        fchars = 'abcdefghjklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_';
        /*All valid first chars*/

    do {
        if (q.length >= (52 * Math.pow(64, limit - 1)) && limit >= length) {
            return 'OutOfPossibility';
        } else if (q.length >= (52 * Math.pow(64, limit - 1)) && limit < length) {
            ++limit;
        }
        result = '';
        result += fchars[Math.floor(Math.random() * fchars.length)];
        for (let i = limit - 1; i > 0; --i) {
            result += chars[Math.floor(Math.random() * chars.length)];
        }
    } while (q.includes(result));
    q.push(result); /*push for avoiding collision in next time of funtion call*/
    return result;
}

At Third, in css-loader scope inside of webpack config I used getLocalIdent not localIdentName.

getLocalIdent: (loaderContext, localIdentName, localName, options) => {
    var randName = randomNaming(3,2);
    if (localName.match(/^i-/i)) {
    randName = `i-${randName}`;
    } else if (localName.match(/^i_/i)) {
        randName = `i_`;
    } else {
        randName = `${randName}`;
                                    }
    if (typeof cache[localName] =='undefined') {
        cache[localName] = randName;
        return cache[localName];
    } else {
        return cache[localName];
    }
}

And now all of names are hashed and CSS file is in minimal possible volume size. And the HTML is so light weight.

这篇关于webpack css-loader localIdent名称哈希长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！