poner - Cómo usar imágenes en css con Webpack

imagen de fondo css pantalla completa

Question

Estoy haciendo una configuración de React w / Webpack y estoy luchando por hacer lo que parece debería ser una tarea simple. Quiero que el paquete web incluya imágenes y las minimice como yo con un trago, pero no puedo resolverlo. Solo quiero poder vincular una imagen en mi CSS así:

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

Tengo todas mis carpetas css / js / img dentro de una carpeta src. Las salidas de Webpack a una carpeta de dist, pero no puedo averiguar cómo obtener imágenes allí.

Aquí está mi configuración de paquete web:

 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

Estuve atascado con un problema similar y descubrí que puedes usar url-loader para resolver sentencias "url()" en tu CSS como cualquier otro requerir o importar sentencias.

Para instalarlo:

npm install url-loader --save-dev

Instalará el cargador que puede convertir rutas resueltas como cadenas BASE64.

En el archivo de configuración de su paquete web, use el cargador de URL en cargadores

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

También asegúrese de especificar correctamente su ruta pública y la ruta de las imágenes que intenta cargar.