css-loader和file-loader的关联

Question

我说一下我的理解，各位看有没有错，顺便解答一下我的疑惑：

1. css-loader，用来把css文件打包到JS，但是我看到一些文章也说道它是用来处理css中的url()，请问这个处理是怎么处理法？
2. file-loader，根据配置把打包后的资源引用到指定路径，因为我们的打包的资源是相对index.html的。

OK，就拿css中的background-image为例，file-loader是用来把图片放到我们配置的路径，接着file-loader修改background-image中的url到配置的路径，从而正确的引用图片，请问是不是这样？如果是这样，那么css-loader所谓的处理url是怎么个处理法？如果不是，那是怎样的？

Answer 1

Webpack 只懂 JavaScript 。

file-loader 让 Webpack 可以理解一些非 JavaScript 的资源，自动生成（emit）文件到目标文件夹（outputPath），然后返回项目运行时用的地址（publicPath）。（也可以不生成文件，只为获得地址，文件再自行处理）。目的是为了借用 Webpack 来一并处理文件依赖。

url-loader 功能跟 file-loader 一样，只是可以对小的资源进行 base64 编码 URL 处理而不 emit 文件。

css-loader 是为了让 Webpack 理解 CSS，只是把 url() 变成 import/require()。还需要上面两个 loader 来处理资源。

Answer 2

你这问题问的很好
1.看css-loader的包介绍，意思是把@import 和 url() 这种方式的转换成import/require()方式
2.看File Loader的介绍，他是返回对应文件的publicUrl

如果实在不行的话就去看源码