Me comunico con usted porque tengo un problema en la configuración de mi paquete web. Solo quiero copiar mis imágenes en la carpeta /dist/images/ de /src/images/.

Aquí está mi arquitectura:

 dist |-images | |-lorem-picsum.png |-pages | |--about.html | |--home.html |-a069f3e2cf7332c2cd34.png |-main.js node_modules src |-images | |-lorem-picsum.png |-pages | |--about.html | |--home.html |-index.js package-lock.json package.json webpack.config.js

Estoy usando el cargador de archivos y aquí está la configuración de mi webpack.config.js:

 const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { mode: 'development', entry: path.resolve(__dirname, './src/index.js'), output: { path: path.resolve(__dirname, './dist'), filename: 'main.js', }, module: { rules: [ { test: /\.html$/i, loader: "html-loader", options : { minimize : false, } }, { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: 'file-loader', options: { name : '[name].[ext]', outputPath: 'images' } } ], }, ], }, plugins: [ new HtmlWebpackPlugin({ template : path.resolve(__dirname, './src/pages/home.html'), filename: path.resolve(__dirname, './dist/pages/home.html'), }), new HtmlWebpackPlugin({ template : path.resolve(__dirname, './src/pages/about.html'), filename: path.resolve(__dirname, './dist/pages/about.html'), }) ], };

El problema ocurre cuando ejecuto "npm run build", está creando una imagen vacía (a069f3e2cf7332c2cd34.png) en la carpeta dist. Esta imagen no tiene contenido visual, pero contiene el siguiente texto:

 export default __webpack_public_path__ + "images/lorem-picsum.png";

Y /dist/home.html ahora contiene:

 <img src="../a069f3e2cf7332c2cd34.png" alt="">

Pero la imagen no se muestra en el frente.

¿Tiene alguna idea de cómo puedo evitar crear este archivo "vacío" y simplemente copiar mi carpeta de imágenes en dist, y mantener lo mismo que está escrito en la carpeta /src/?

Gracias por adelantado