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.