Chicos, ¿se les ocurrió en el paquete web establecer una ruta específica en la salida para las imágenes, pero los archivos que se crean en la salida son archivos rotos en la raíz de la carpeta de salida (que es dist aquí)? Mientras que los archivos saludables se crean pero no se vinculan. Y en html, css vincula los archivos rotos
O déjame ponerlo de esta manera:
La salida que quiero crear:
src webpack/webpack.config.js dist |—— |fonts |—— |js |—— |img -————--img1.jpg -————--img2.png ———-—--img3.png ——- index.html ——- another.htmlPero el resultado final:
src webpack/webpack.config.js dist |—— |fonts |—— |js |—— |img -————--img1.jpg -————--img2.png -————--img3.png ——- index.html ——- another.html ——- sdf8s7s.jpg => broken and linked file ——- sdf8ws3.png => broken and linked file ——- sd4sg7i.png => broken and linked file.
//webpack/webpack.config.js module.exports = { entry: { 'bundle': path.resolve(__dirname, '../src/js/index.js'), }, output: { path: path.resolve(__dirname, "../dist"), filename: "js/[name].js", clean: true, }, module: { rules: [ //... { test: /\.(png|svg|jp[e]g|gif|webp)$/i, loader: 'file-loader', options: { outputPath: '/img/', name: "[name].[ext]", useRelativePaths: true, publicPath: '../img/' }, }, //... ], }, plugins: [ //... ], };Si mira de cerca y abre, intente abrir esas imágenes en el editor de texto, obtendrá lo que sucedió exactamente. De todos modos, en el nuevo paquete web no hay necesidad de un cargador de archivos para imágenes como se muestra en los documentos.
lo que he hecho para resolver este problema es agregar esto a la configuración del paquete web:
module.rules[{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource" }]y
output: {assetModuleFilename: 'images/[name][ext]'}esto debería arreglar la vinculación, las imágenes rotas y el hash