前端杂症--关于“babel-loader缓存不更新，导致babel.config.js配置无效”bug解析

最新推荐文章于 2024-05-22 20:28:26 发布

资深萌新叨叨叨

最新推荐文章于 2024-05-22 20:28:26 发布

阅读量2.9k

点赞数

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq985169322/article/details/122842928

版权

本文探讨了前端开发中遇到的babel-loader缓存导致的配置无效问题。问题根源在于babel-loader通过JSON.stringify(config)来生成哈希码，使得function类型的配置变化无法被识别。解决方案包括使用webpack5内置缓存关闭babel缓存，以及针对webpack4以下版本的特定处理。通过复现bug的步骤，作者展示了如何触发和解决这个问题。

摘要由CSDN通过智能技术生成

一、先说结论

问题原因：

该bug源于babel-loader自身，使用JSON.stringify(config)生成哈希码作为命中缓存条件之一，所以function（不仅function，js基础不赘述）中配置变化无法读取。源码中关键代码如下：

  /** node_modules/babel-loader/lib/cache.js 文件 */
  
  const filename = function (source, identifier, options) {
   
  // md4 hashing is not supported starting with node v17.0.0
  const majorNodeVersion = parseInt(process.versions.node.split(".")[0], 10);
  let hashType = "md4";

  if (majorNodeVersion >= 17) {
   
    hashType = "md5";
  }
	
  // 这里function丢失，导致新哈希码命中旧哈希码
  const hash = crypto.createHash(hashType);
   const contents = JSON.stringify({
   
    source,
    options,
    identifier