Webpack ile css'de görüntüler nasıl kullanılır?

Question

Bir Web/Web Paketi kurulumu gerçekleştiriyorum ve basit bir görev gibi görünmesi gereken bir şey yapmak için uğraşıyorum. Webpack'in görüntüleri dahil etmesini ve onları gulp gibi minimize etmesini istiyorum ama anlayamıyorum. Sadece şöyle benim css bir görüntü bağlamak mümkün istiyorum:

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

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

Bir src klasörünün içinde benim css/js/img klasörlerin hepsi var. Webpack bir klasöre çıktı, ancak görüntüleri nasıl alacağımı anlayamıyorum.

İşte benim webpack kurgusunda:

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

Ben benzer bir sorun ile sıkışmış ve başka gerektiren veya ithalat ifadeleri olarak CSS'nizde "url()" ifadelerini çözmek için url-loader kullanabilirsiniz bulunmuştur.

yüklemek için:

npm install url-loader --save-dev

Bu BASE64 dizeleri olarak çözümlenen yolları dönüştürebilirsiniz yükleyici kuracaktır. yükleyiciler Ayrıca

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

doğru şekilde kamu yolunu belirterek ve yüklemeye çalışıyorsanız görüntülerin yolu emin olun

daki webpack yapılandırma dosyası kullanımı url-yükleyici olarak

.