css-loader和file-loader的關(guān)聯(lián)

我說(shuō)一下我的理解，各位看有沒(méi)有錯(cuò)，順便解答一下我的疑惑：

css-loader，用來(lái)把css文件打包到JS，但是我看到一些文章也說(shuō)道它是用來(lái)處理css中的url()，請(qǐng)問(wèn)這個(gè)處理是怎么處理法？
file-loader，根據(jù)配置把打包后的資源引用到指定路徑，因?yàn)槲覀兊拇虬馁Y源是相對(duì)index.html的。

OK，就拿css中的background-image為例，file-loader是用來(lái)把圖片放到我們配置的路徑，接著file-loader修改background-image中的url到配置的路徑，從而正確的引用圖片，請(qǐng)問(wèn)是不是這樣？如果是這樣，那么css-loader所謂的處理url是怎么個(gè)處理法？如果不是，那是怎樣的？

回答

編輯回答

喜歡你

Webpack 只懂 JavaScript 。

file-loader 讓 Webpack 可以理解一些非 JavaScript 的資源，自動(dòng)生成（emit）文件到目標(biāo)文件夾（outputPath），然后返回項(xiàng)目運(yùn)行時(shí)用的地址（publicPath）。（也可以不生成文件，只為獲得地址，文件再自行處理）。目的是為了借用 Webpack 來(lái)一并處理文件依賴(lài)。

url-loader 功能跟 file-loader 一樣，只是可以對(duì)小的資源進(jìn)行 base64 編碼 URL 處理而不 emit 文件。

css-loader 是為了讓 Webpack 理解 CSS，只是把 url() 變成 import/require()。還需要上面兩個(gè) loader 來(lái)處理資源。

2018年4月28日 21:26

編輯回答