2
webpackモジュールバンドラでangular2アプリケーションを作成しています。今、私はjpg、gif、pngなどの画像ファイルを読み込むためのファイルローダーを追加しました。しかし、ビルドコマンドを実行すると、イメージファイルはバンドルされません。ここに私の構成は次のとおりです。webpackを使用してイメージをバンドルするには？
webpack.config.js（画像のみローダーの設定）
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=.+)?$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
私はこのような私のHTMLテンプレートのフォルダから画像が含まれている：
<img src="/asset/img/myImg.png"/>
も私のCSSで：
#myBackground {
background: background: #344556 url(/assets/img/background.jpg) center/cover;
}
しかし、アプリケーション全体をビルドすると、イメージはwebpack設定で指定したようにassetsフォルダに配置されません。
今のところ最も奇妙なのは、フォントに同じ設定が使用されており、assetsフォルダ内に作成されているということです。これはstyle.cssにでフォントを含むための私のCSSです：
@font-face {
font-family: 'robotolight';
src: url("../fonts/roboto-light-webfont.eot");
src: url("../fonts/roboto-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto-light-webfont.woff") format("woff"), url("../fonts/roboto-light-webfont.ttf") format("truetype"), url("../fonts/roboto-light-webfont.svg#robotolight") format("svg");
font-weight: normal;
font-style: normal;
}
などsvgs、TTF、WOFF、のようなこのフォントのすべてのファイルは、ビルドを実行した後の資産フォルダに格納されています。
アセットフォルダにイメージが作成されていない理由は誰にもわかりますが、フォントファイルは同じ設定/ローダで表示されます。