鍍金池/ 問答/HTML/ webpack打包圖片路徑配置問題

webpack打包圖片路徑配置問題

我的項目打包之后的dist目錄

clipboard.png

1、css目錄下的css文件有背景圖片 background-image: url('../images/XXX');

2、React 代碼中也有圖片 <img src={require("./images/XXX.jpg")}/>

注：由于我項目的架構(gòu)，上面兩個images不是同一個文件夾。

問題是：
我打包之后把所有圖片都放在了images目錄下
那么前面兩種情況訪問images中的圖片路徑會不一樣

1、../images/XXX.jpg
2、images/XXX.jpg

那么我在webpack的配置文件中要如何配置？

test: /\.(png|gif|jpg|jpeg|bmp)$/i,
use: {
  loader: 'url-loader',
  options: {
    limit: '8192',
    outputPath: 'images/'
  }
}
回答
編輯回答
念舊

把圖片路徑設置為從根目錄開始
你試一下：

test: /\.(png|gif|jpg|jpeg|bmp)$/i,
use: {
  loader: 'url-loader',
  options: {
    limit: '8192',
    outputPath: 'images/',
    publicPath : '/images'
  }
}

加上這個publicPath

2017年8月1日 23:54
編輯回答
巴扎嘿

既然你用了 url-loader 那么你應該知道如果文件字節(jié)超過 limit 值會是什么結(jié)果。簡單來說，大小超過 limit 值的資源會被復制到輸出目錄，然后重寫引用路徑。這時候你可以用 publicPath 給資源定義重寫后的基本路徑，跟 output.publicPath 的意義類似。而 outputPath 中的值如果是相對路徑則是在 dist 為父級目錄的基礎(chǔ)上進行配置。

所以 loader 配置是這樣的：

{
    test: /\.(png|gif|jpg|jpeg|bmp)$/i,
    use: {
      loader: 'url-loader',
      options: {
        limit: '8192',
        outputPath: 'images/',
        publicPath: '/dist/images/'
      }
    }
}

資源會被輸出到 dist/images 目錄中，引用地址被重寫為：

background-image: url('/dist/images/images/XXX');
2017年6月30日 02:51