6

webpack モジュールバンドラーを使用して angular2 アプリケーションを作成しています。これで、jpg、gif、png などの画像ファイルをロードするためのファイルローダーが追加されました。しかし、ビルド コマンドを実行すると、イメージ ファイルがバンドルされません。これが私の構成です：

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 フォルダーに配置されません。

最も奇妙なことは、フォントに同じ構成が使用され、アセットフォルダー内に作成されていることです。これは、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 などのすべてのファイルは、ビルドを実行した後、assets フォルダーにあります。

アセットフォルダーに画像が作成されていないのに、フォントファイルが同じ構成/ローダーで作成されている理由を誰か教えてください。

4

1 に答える 1

4

これの複製かもしれません

一部のローダーがありません (extract-loader と html-loader)

それ以外の場合、これらの静的アセットが HTML から直接含まれている場合は、この便利な webpack プラグインを介してこれらのアセットを手動でコピーすることを試みることができます

于 2017-01-09T16:15:03.323 に答える