Wie man Bilder in css mit Webpack verwendet

Question

Ich mache ein React w/Webpack-Setup und bin schwer zu tun, was scheint, sollte eine einfache Aufgabe sein. Ich möchte, dass Webpack Bilder enthält, und minimiere sie wie ich mit Schluck, aber ich kann es nicht herausfinden. Ich möchte nur in der Lage, ein Bild in meinem css zu verknüpfen wie folgt:

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

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

Ich habe alle meine css/js/img Ordner in einem Ordner src. Webpack gibt die Daten in einen Ordner "dist" aus, aber ich kann nicht herausfinden, wie ich Bilder dorthin bringen kann.

Hier ist meine webpack Setup:

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

Ich war mit ähnlichem Problem stecken und festgestellt, dass Sie url-loader können "url()" Aussagen in Ihrem CSS als andere benötigen oder Import-Anweisungen zu lösen.

es zu installieren:

npm install url-loader --save-dev

Es wird den Loader installieren, die aufgelöste Pfade als BASE64 Strings umwandeln können.

In Ihrer webpack Konfigurationsdatei Verwendung url-loader in Lader

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

auch sicher, dass Sie Ihren öffentlichen Pfad angeben richtig und den Pfad der Bilder, die Sie laden wollen.