Mis imágenes del archivo .scss se muestran en "dist/images", pero no se cargan en localhost. Y las imágenes del archivo html (tipo) no se leen en absoluto, parece estar cargado en "dist", pero no en "dist/images" y no es visible en la página.
¿Alguien puede ver lo que es incorrecto en mi configuración?
Aquí está la configuración:
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const isProduction = process.env.NODE_ENV == "production"; const config = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", }, devtool: "source-map", devServer: { open: true, host: "localhost", hot: true, }, plugins: [new MiniCssExtractPlugin(), new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: "index.html", }), ], module: { rules: [ { test: /\.(js|jsx)$/i, loader: "babel-loader", exclude: /node_modules/, }, { test: /\.(sass|less|css|scss)$/, use: [ "css-loader", "sass-loader"], }, { test: /\.(jpe?g|png|svg)$/, use: [{ loader: 'file-loader', options: { name: '[hash].[ext]', outputPath: 'images' }, }] }, ], }, }; module.exports = () => { if (isProduction) { config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); } else { config.mode = "development"; } return config; };