Come utilizzare le immagini in css con Webpack

Question

Sto facendo una configurazione di React w/Webpack e sto lottando per fare ciò che sembra dovrebbe essere un compito semplice. Voglio che il webpack includa le immagini e le minimizzi come se fossi io con il gulp ma non riesco a capirlo. Voglio solo essere in grado di collegare un'immagine nella mia css in questo modo:

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

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

ho tutti i miei css/js/cartelle all'interno di una cartella img src. Webpack restituisce una cartella dist, ma non riesco a capire come ottenere le immagini lì.

Qui è la mia messa a punto 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

sono rimasto bloccato con problema analogo e ha scoperto che è possibile utilizzare per risolvere url-loader"url()" dichiarazioni nel CSS come qualsiasi altro richiedono, o istruzioni import.

Per installarlo:

npm install url-loader --save-dev

verrà installato il caricatore in grado di convertire i percorsi risolti come stringhe base64.

Nella tua webpack config utilizzo di file url-loader in caricatori

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

assicurarsi che si sta specificando il vostro percorso pubblico in modo corretto e il percorso di immagini che si sta tentando di caricare anche.