example - Cargador de archivos Webpack ignorando archivos PNG

webpack 4 images

Question

Estoy tratando de dar salida a todos los archivos de imagen a través del cargador de archivos webpack, sin embargo, el paquete web está ignorando imágenes con extensiones PNG. La configuración funciona correctamente en archivos JPG.

Mi configuración de paquete web:

const path = require(''path'');
const PATHS = {
src: path.join(__dirname, ''src''),
img: path.join(__dirname, ''src/img''),
styles: path.join(__dirname, ''src/styles''),
build: path.join(__dirname, ''build'')
}
module.exports = {
context: PATHS.src,
entry: {
script: [''./scripts/main.js'', ''./styles/main.scss''],
index: ''./index.html''
},
output: {
path: PATHS.build,
filename: ''[name].js''
},
module: {
loaders: [{
test: //.scss$/,
loaders: ["style", "css", "sass"],
include: PATHS.styles
}, {
test: //.(png|jpg)$/i,
loader: ''file?name=[path][name].[ext]'',
include: PATHS.img
}, {
test: //.(html)$/,
loader: ''file?name=[path][name].[ext]''
}]
}
};

estructura de carpeta fuente

Answer 1

Puede ser un problema con el cargador en sí mismo, puedes probar url-loader

{ test: //.(png|jpg|jpeg)$/, loader: ''url-loader?limit=10000'' }

Answer 2

El problema con los archivos PNG era con la importación de imágenes PNG, ambos fueron importados por el atributo html src, mientras que la imagen JPG fue importada por el atributo url en css. Por lo tanto, el problema no estaba en los formatos de imagen.

Se solucionó agregando extract-loader y html-loader a html loader. Webpack iguala incluso los atributos src en html si lo entiendo correctamente.

Configuración del cargador de HTML:

loader: ''file-loader?name=[path][name].[ext]!extract-loader!html-loader''

Gracias por indicarme el método de importación de imágenes.