Wie * URL-Loader * Pfad auflösen?

Question

Es gibt eine HTML-Datei tief in der Baumstruktur. Es hat diese Zeile:

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

Wie kann ich feststellen Webpack in images Ordnern für diese Datei zu suchen, ohne langen Pfades so, dass die Verwendung? Ich brauche jede img Element auf einem beliebigen HTML-Datei an einer beliebigen Stelle im Baum befindet sich auf images Ordner zu lösen, so dass ich so etwas machen könnte:

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

Hier ist meine Konfigurationsdatei:

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

mit htmlLoader Eigenschaft in Ihrem webpack Config können Sie eine root-Eigenschaft zu html-loader passieren, ein nd verwenden root-relative Pfade. Dann wird der relative Pfad an diese Root-Eigenschaft angehängt, um den absoluten Pfad aufzulösen.

Zum Beispiel, wenn Sie wollen Wege bieten in Bezug auf src Verzeichnis:

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') 
    } 
}; 

dann können Sie Pfade relativ zu src Verzeichnis zum Beispiel liefern:

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

Bekanntmachung des führenden / vor dem Pfad, so sagt man html-loader es ist ein Root-relativer Pfad, ot von daher wird es immer noch relativ zu seinem eigenen Kontext sein.