【webpack】---url-loader 圖片路徑問題

webpack:url-loader 圖片路徑問題

咱們使用webpack打包項目中，在處理圖片路徑時， 最經常使用的loader有兩種， url-loader 和 file-loader。

咱們在寫項目中引用路徑的時候，填寫的URL是基於咱們開發時的路徑， 可是在webpack打包時， 會將各個模塊打包成一個文件，裏面引用的路徑是相對於入口html文件，並非相對於咱們的原始文件路徑的。loader 能夠解析項目中引入的URL，而且根據配置，把圖片拷貝到相應路徑， 再將打包後的文件中的路徑 替換爲圖像的最終路徑。

file-loader 和 url-loader 均可以解決這個問題。 可是url-loader會將引入的圖片進行編碼， 咱們引用的時候只須要引入這個文件就能夠訪問圖片了， 能夠大大減小 HTTP請求的次數。

url-loader 封裝了 file-loader， 但並不依賴他， 因此咱們能夠只須要安裝 url-loader就能夠了。

在使用url-loader時，出現了 路徑引用錯誤的 狀況。

1. 問題復現

webpack.prod.js

module.exports = {
    // ...
    rules: [
        // ...
        {
        test: /\.(png|svg|jpg|gif)$/, use: [ // ... { loader: 'url-loader', //是指定使用的loader和loader的配置參數 options: { limit:500, //是把小於500B的文件打成Base64的格式，寫入JS name: 'images/[name]_[hash:7].[ext]', } } ] }, { test: /\.(css)$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', } ] ], } 複製代碼

index.js

import React from 'react'; import ReactDom from 'react-dom'; import './index.scss'; import logo from './logo.png'; ReactDom.render( <div>Hello world <img src={logo} /> </div>, document.getElementById("root") ); 複製代碼

index.css

#root { color: aqua; background: url('./logo.png'); }; 複製代碼

打包後的 css 文件

#root{background:url(images/logo_e179a47.png);color:#0ff} 複製代碼

打包後 的 文件結構

── css

│   └── app.9fd7e730df40df61cc5a.css

├── images

│   └── logo_e179a47.png

├── js

│  └── app.382da24eb9c30ee2.js

└── index.html

咱們在瀏覽器中打開打包後的 index.html

 

 

能夠看出咱們在index.js 中 引入的圖片是能夠正常加載的， 可是咱們在css中引入的背景圖 並無加載成功。

2. 問題緣由

webpack 在 打包時， 首先會把圖片 複製到 /dist/images/ 文件夾下， 而後把 css 文件中的url 路徑 替換爲webpack中options的name屬性指向的路徑，即 /images/logo.png, 可是這個路徑是相對路徑，是相對於 /dist/css/~.css 來講的， 因此此處引用的 文件地址爲： /dist/css/images/logo.jpg。 可是咱們打包後的css 文件夾中， 並無 images/logo.png, 因此圖片並無渲染出來。 可是 對於 咱們 index.js 中 引用的圖片， 此處相對路徑是相對於 index.html 來講的， 因此 是能夠取到圖片的。

3. 解決方式

{
    test: /\.(css)$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../', } }, { loader: 'css-loader', } ] }, 複製代碼

在爲css文件配置 loader時， 添加 publicPath 屬性。 這樣作， 咱們在圖片打包時， 仍會將圖片複製在 /dist/images/ 文件夾之下， 可是 在css文件中引用時， 會將路徑替換爲 publicPath + name。

打包後的 css 文件：

#root{background:url(../images/logo_e179a47.png);color:#0ff} 複製代碼

至此， 項目中 css 的文件引用路徑 和 js 中的文件引用路徑 均爲正確的圖片路徑。

 

http://www.javashuo.com/article/p-nlgpvygt-hm.html