webpack的css-loader的介绍是意思？

Question

问题描述

css-loader的npm包链接传送介绍有一句话是这样的：

The css-loader interprets @import and url() like import/require() and will resolve them.

这句话的直接翻译：css-loader像import和require引入的方式一样去解释@import和url()

问题

（1）不是很理解这句话。什么叫像import/require()解释@import和url?
（2）看到网上有些人说，css-loader的作用是使css可以被webpack模块化处理，那css-loader不应该是找到js文件中引入css的语句并且解析出来？
（3）引入无非import或者require这样，那何来“像import/require()”
（4）“解释@import和url()”该怎么理解，指的是import或require的css文件中存在@import或者img/background-image的url的解析？
主要是看不懂这句话的描述，感觉虽然能配置，但总是理解不了css-loader的原理

Answer 1

1. webpack把任何依赖都当作是一个模块，最后组织成一个庞大的依赖树，严格来说应该叫图；
2. 一般你在js中引入其他的资源的时候，使用import/require，觉得就应该是这样，但你是不是觉察到，这只是js语法的一部分，但在工具层面，把它解释成了引用另外一种资源
3. 但是我在css中需要引用资源的时候需要怎么做呢，若你也使用import/require，那css中有这种语法么，再想想css中引入资源的语法是什么，当然你可以自己定义所谓的import/require，但别人可能就会模糊了
4. 说白了，就是为了维持依赖，使用什么方式不重要，但应该是兼容现有东西