css loader如何解析webpack中的资源

Question

I was learning about css-loader in webpack, the defination says that

The css-loader interprets @import and url() like import/require() and will resolve them. What does it mean, In an example in the documentaion there is

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

So my question is will it convert url('./image.png') to require('image.png')

For example in a css file if i have background property as

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

will the above style converted like

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

if this is how the conversion take place than background:require('./image.png') is not valid css, is there something wrong in my understanding, may be i'm not getting what css-loader does actually. I went through the documentation of css-loader.

can anyone explain where i am wrong.

Answer 1

please read about css-loader resolve urls https://webpack.js.org/loaders/css-loader/#url

if its just about understanding, webpack is fully js based. that means there have to be a way to check does the file exist, copy file or step in further actions. in the endfile it's simply css syntax with 'replaced/resolved' URL.

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

check also https://www.npmjs.com/package/resolve-url-loader