如何解決* url-loader *路徑？

Question

樹結構中有一個HTML文件。它有這條線：

<img src="../../images/call.svg"> 

我怎麼能告訴的WebPack尋找這個文件夾images不使用這樣的長路徑？ 我需要在位於樹中的任何位置的任何HTML文件的任何img元素解析爲images文件夾，這樣我就可以做類似：

<img src="images/call.svg"> 

這是我的配置文件：

var path = require('path'); 
 
module.exports = { 
 
\t entry: './src/app.js', 
 
\t output: { 
 
\t \t path: './dist', 
 
\t \t filename: 'bundle.js' 
 
\t }, 
 
\t module: { 
 
\t \t loaders: [ 
 
\t \t \t { 
 
\t \t \t \t test: /\.html$/, 
 
\t \t \t \t loader: "html-loader" 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t test: /\.(jpe?g|png|gif|svg)$/i, 
 
\t \t \t \t loader: 'url' 
 
\t \t \t } 
 
\t \t ] 
 
\t } 
 
};

Answer 1

在你的WebPack配置使用htmlLoader屬性，你可以一個root屬性傳遞給html-loader，一nd使用根相對路徑。然後相對路徑將被附加到這個根屬性來解析絕對路徑。

例如，如果你想提供相對路徑src目錄：

var path = require('path'); 
module.exports = { 
    entry: './src/app.js', 
    output: { 
     path: './dist', 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.html$/, 
       loader: "html-loader" 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loader: 'url' 
      } 
     ] 
    }, 
    htmlLoader: { 
     root: path.resolve(__dirname, 'src') 
    } 
}; 

再比如，你可以提供相對路徑src目錄：

<img src="/images/call.svg"> 

通知領先/在路徑的前面，這就是你如何告訴html-loader它是根相對路徑，ot從本質上講，它仍然是相對於自己的情況而言的。