鍍金池/ 問答/HTML/ css-loader和file-loader的關(guān)聯(lián)

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

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

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

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

回答
編輯回答
喜歡你

Webpack 只懂 JavaScript 。

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

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

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

2018年4月28日 21:26
編輯回答
還吻

你這問題問的很好
1.看css-loader的包介紹，意思是把@import 和 url() 這種方式的轉(zhuǎn)換成import/require()方式
2.看File Loader的介紹，他是返回對(duì)應(yīng)文件的publicUrl

如果實(shí)在不行的話就去看源碼

2017年4月13日 16:28