javascript - css loader如何解析webpack中的资源

Question

我正在学习 webpack 中的 css-loader，定义说

css-loader 解释@import和url()喜欢import/require()并将解决它们。这是什么意思，在文档中的一个例子中有

url(image.png) => require('./image.png')

所以我的问题是它会转换url('./image.png')为 require('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-loader 的实际作用。我浏览了 css-loader 的文档。

谁能解释我错在哪里。

Answer 1

请阅读有关 css-loader 解析网址 https://webpack.js.org/loaders/css-loader/#url

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

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

还要检查 https://www.npmjs.com/package/resolve-url-loader