如何使用Webpack 2獲取數據屬性中的圖像？

Question

我使用我的HTML .pug模板，並在我的圖片標準src屬性，像這樣：

img(src=`../images/${image}`) 

當我運行webpack -p，在我的圖片的src的定義的任何圖像是由的WebPack發現並放入我的dist目錄。這正是我期望會發生的事情。

不過，我現在不得不延遲加載我的圖片的要求，所以我想將參考圖像放入一個data-src屬性而不是標準的src的，就像這樣：

img(data-src=`../images/${image}` src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') 

再次運行webpack -p當我這樣做時，不會抓住圖像。

有沒有什麼方法可以讓Webpack查看非src屬性來實現它需要這些圖像作爲生產構建的一部分？

Answer 1

好的。事實證明，html-loader有一個選項可以傳入標記/屬性類型，以便加載程序進行解析，稱爲attrs，這是這些配置的數組。

我實現了這個做像這樣：

{ 
    test: /\.pug$/, 
    use: [ 
    { 
     loader: 'html-loader', 
     options: { 
     attrs: ['img:src', 'img:data-src', 'link:href'] 
     } 
    }, 
    { 
     loader: 'pug-html-loader', 
     options: { 
     pretty: true, 
     exports: false 
     } 
    } 
    ] 
} 

現在運行webpack -p似乎得到這些圖片。

希望這可以幫助某人在某個時間。

Answer 2

選項仍然可能與html-loader錯誤。您可能需要使用此代替 https://webpack.js.org/plugins/loader-options-plugin/