Javascript css加载器如何解析网页中的资源

我在webpack中学习css加载器，定义是

css加载器解释@import和类似import/requiren的url，并将解析它们。这是什么意思，在文档中的一个例子中

urlimage.png=>require./image.png'

所以我的问题是，它会将url“/image.png”转换为需要“image.png”吗

例如，在css文件中，如果背景属性为

#selector{
   background:url('./image.png'); //this is a vlid css property
}

上面的样式会像这样转换吗

#selector{
   background:require('./image.png'); // this is not a valid css property
}

如果转换是这样进行的，而不是background:require.“/image.png”是无效的css， 我的理解是否有问题，可能是我没有理解css加载器的实际功能。我浏览了css加载器的文档

---

谁能解释一下我错在哪里。

请阅读有关css加载程序解析URL的内容

如果只是为了理解，webpack是完全基于js的。这意味着必须有一种方法来检查文件是否存在、复制文件或采取进一步行动。在endfile中，它只是带有“替换/解析”URL的css语法

background:url('wp-content/themes/yours/assets/image.png');

也检查

---

这一行中，css加载器解释了@import和类似import/require的url，并将解析它们import/require是在js中加载文件的方式。网页包是用js编写的。您将在webpack中导入的所有内容都将由webpack加载/解析，因为这是捆绑所必需的。加载css时，必须解析url，以便js使用正确的路径将其写回css。css加载程序也会将url转换为require，然后webpack解析require语句，这就是它的工作方式