Mientras investigaba el paquete web, encontré un ejemplo en la guía oficial "Administración de activos" que no funciona como se esperaba. La misma imagen se usa para insertar en el DOM en un archivo js y como fondo de elemento en estilos. Cuando se usa style-loader y css-loader para css, así como file-loader para imágenes, se generan dos archivos de salida para una imagen: normal para el elemento y vacío para el fondo en css. Si eliminamos toda la lógica asociada con el cargador de archivos del proyecto, entonces el archivo de imagen para el fondo en css es correcto. ¿Por qué el ejemplo oficial no funciona como se esperaba?

proyecto

 |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- style.css |- index.js |- icon.png |- /node_modules

src/index.js

 import _ from 'lodash'; import './style.css'; import Icon from './icon.png'; function component() { const element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); const myIcon = new Image(); myIcon.src = Icon;+ element.appendChild(myIcon); return element; } document.body.appendChild(component());

src/estilo.css

 .hello { color: red; background: url('./icon.png'); }

webpack.config.js

 const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader', ], }, ], }, };