Webpack、CSS：画像を置く場所は？

Question

webpackで正しく動作するようにイメージ/フォントを置く場所と、url()でCSSで使用する方法を理解するのは本当に苦労しています。

私のWebPACKの設定は、彼らがどこから来たものは結局、しかしべきでないところそれは私に語っ

entry: ['./main.js',], 
output: { 
    path: path.resolve(__dirname, './public/dist'), 
    publicPath: '/dist/', 
}, 

を言います。私は、プロジェクトのどこにいてもファイルを見つけてそこにコピーするのはローダーの仕事だと思っていました。私は、画像のためのローダーを持っている：

{ 
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, 
    loader: 'url-loader?limit=10000', 
}, 

私はtest.png内部でディレクトリ/public/imagesを作成しました。 public/dist/images/または/public/dist/になることを期待していましたが、そうではありません。

最終的には、画像を背景として使用するにはどうすればよいですか？ /public/dist/images/test.png？今のところ私は持っている

.mydiv { 
    background: url("/public/images/test.png"); 
} 

これは表示されていません。私はrequireでもCSSモジュールではできないようです。

どうすればわかりますか？

編集：スタイルローダー：

{ 
    test: /\.css/, 
    loaders: [ 
     'style-loader', 
     `css-loader?${JSON.stringify({ 
     sourceMap: isDebug, 
     modules: true, 
     localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]', 
     camelCase: 'dashes', 
     })}`, 
     'postcss-loader', 
    ], 
    }, 
    { 
    test: /\.scss$/, 
    loaders: ["style", "css", "sass"], 
    }, 

Answer 1

同じくらい私はあなたがすべてのことを行う必要はありません理解し、WebPACKのはあなたのためにそれの世話をします。フォルダのコール画像いくつかの場所を持っている、あなたは、それはまた、それが何か他のものとURLでさえパスと名前変更されます、あなたがこの

.mydiv { 
    background: url("/public/images/test.png"); 
} 

のWebPACKはdistのフォルダでこれをバンドルしますしたいとしましょう。私の場合、私はこの

background: url("../../assets/webpack+angular.png") 

のようなURLを持っていたと私はWebPACKの実行時に、私はdist/f1305c1f7292179760078b1efdee3ffa.png と呼ばれるファイルを持って、私のURLは、この

url(/f1305c1f7292179760078b1efdee3ffa.png); 

ようになり、すべてがうまく動作します。あなたはCSSでrequireを使う必要はありません。