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
Solución :
El problema es que Webpack en la versión 5 no funciona así para las imágenes.
'file-loader' no es necesario por ahora, simplemente puede usar esta siguiente regla en webpack.config.js:
{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', generator: { filename: 'images/[name][ext]' } }
Esas líneas construirán las mismas imágenes en /dist/images/