Webpackは特定のディレクトリの画像を解決します

Question

/assets/imagesの画像と/srcの画像があります。

require("../assets/images/some-image.png");

私は画像のパスを指定する必要がないように、私はこれを簡素化することができる方法があります：

が /srcから画像を参照するには、私は現在、これを行う必要がありますか？潜在的にただ image!some-image.pngが必要ですか？

Answer 1

私はresolve.aliasを使用することによって、これを達成するために管理：

resolve: { 
    alias:{ 
     "~images": path.resolve("./assets/images") 
    }, 
    extensions: [ '', '.js', '.jpg' ] 
} 

私はその後、私に./assets/images/test.jpgを取得するためにrequire("~images/test.jpg");を使用することができます。

Answer 2

パスで変数を設定し、それを参照することができます。

var imagePath = '../assets/images/'; 
require(imagePath + 'some-image.png'); 

またはES6テンプレート文字列と

const imagePath = '../assets/images/'; 
require(`#{imagePath}some-image.png`);