webpack css-loader localIdent 名称哈希长度答案

【问题标题】：webpack css-loader localIdent name hash lengthwebpack css-loader localIdent 名称哈希长度
【发布时间】：2017-11-30 18:19:17
【问题描述】：

我使用webpack 和css-loader，在我的css-loader 配置中我使用这些选项：

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

正如你所见，很明显我希望我的所有班级名称都包含 3 个字符，并且在构建之后我的愿望完全实现了，但是有一个非常大的问题。

有些类名同名！（冲突！）

例如：

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

和

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

这是一个大问题，但是当我使用[hash:base64:5] 时，一切都会好起来的，每个类都有自己的哈希名称，没有任何冲突。

我在这个问题上搜索了大约 4 个小时，发现所有开发人员都在他们的配置中使用数字 5 作为哈希长度的更少。我不知道为什么！我计算了三个长度的 64 个字符 [a-z][A-Z][0-9][-,_] 可以有 262144 个不同的单词，那为什么不能有一些不同的名字呢？

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

【问题讨论】：

标签： javascript css hash webpack css-loader

【解决方案1】：

最后，我找到了正确的方法，它是hash，而不是randomNaming 函数。这是用来散列的，所以很明显它的长度很短，命名很广，可能会产生冲突。所以我编写了自己的Webpack 命名函数，并在Webpack 配置文件中使用变量和函数顶部。这些是我的解决方案的步骤：

首先，cache 和 queue 有两个变量。缓存以便于访问LocalName 及其新的randomName 和队列以保存涉及所有新随机名称的变量条目以避免冲突。

let q = [],
  cache = {};

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

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;
}

第三，在webpack 配置内的css-loader 范围内，我使用getLocalIdent 而不是localIdentName。

const 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];
  }
};

现在所有名称都经过哈希处理，CSS 文件的卷大小尽可能小。而HTML 非常轻巧。

【讨论】：