* url-loader * pathを解決するには？

Question

ツリー構造の深いところにHTMLファイルがあります。これは、この行を持っています

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

どのように私はそのように長いパスを使用せずにimagesフォルダにこのファイルを探すためにWebPACKのを伝えることができますか？ 私はのようなものを作ることができるように、私は、imagesフォルダに解決するために、ツリー内の任意の位置に任意のHTMLファイル上の任意のimgの要素が必要になります。

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

：

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

ここに私の設定ファイルがありますあなたのWebPACKの設定でhtmlLoaderプロパティを使用して

Answer 1

、あなたはhtml-loader、Aへのルートプロパティを渡すことができますルート相対パスを使用します。次に、相対パスがこのルートプロパティに追加され、絶対パスが解決されます。例えば

あなたはsrcディレクトリへの相対パスを提供したい場合は：あなたが、たとえば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') 
    } 
}; 

：/をリードする

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

予告の前に、html-loaderと言うと、それはルート相対パスです彼女自身はまだそれ自身の文脈に相対的であろう。