WebpackでCSSを使用する方法

Question

WebpackセットアップでReactを作成していますが、単純な作業でなければならないようなことをするのに苦労しています。私はwebpackに画像を含めることを欲しがっています。私は貪欲で私のようにそれらを最小限に抑えますが、私はそれを理解することはできません。私はちょうどそのように私のCSSで画像をリンクできるようにしたい：

/* ./src/img/background.jpg */ 

body { background: url('./img/background.jpg'); } 

私はsrcフォルダ内の私のCSS/JS/IMGフォルダのすべてを持っています。 Webpackはdistフォルダに出力しますが、そこに画像を取得する方法はわかりません。ここで

が私のWebPACKのセットアップです：

var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    devtool: 'cheap-eval-source-map', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/dev-server', 
    './src/index.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    // publicPath: './dist', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new HtmlWebpackPlugin({ 
    template: './src/index.html' 
    }) 
    ], 
    module: { 
    loaders: [{ 
    exclude: /node_modules/, 
    test: /\.js?$/, 
    loader: 'babel' 
    }, { 
    test: /\.scss$/, 
    loader: 'style!css!sass' 
    }, { 
    test: /\.(png|jpg)$/, 
    loader: 'file-loader' 
    }] 
}, 

devServer: { 
    historyApiFallback: true, 
    contentBase: './dist', 
    hot: true 
    } 
}; 

Answer 1

私は同様の問題で立ち往生し、他が必要か、importステートメントとして、あなたのCSSで"url()"文を解決するためにurl-loaderを使用できることが判明しました。

それをインストールするには、次の

npm install url-loader --save-dev

それはBASE64文字列として解決のパスに変換することができますローダーをインストールします。ローダーであなたのWebPACKの設定ファイルを使用し、URLローダーで

{ 
    test: /\.(png|jpg)$/, 
    loader: 'url-loader' 
} 

はまた、あなたが正しくあなたの公開パスを指定してロードしようとしている画像のパスされていることを確認してください。