Estoy tratando de cargar un archivo jpg en la página de inicio de mi aplicación:

 import cad from './CAD/untitled.106.jpg'

pero el siguiente error seguía apareciendo:

 assets by status 2 MiB [cached] 1 asset cached modules 2.41 MiB (javascript) 937 bytes (rjavascript modules 420 KiB ./src/components/HomePage.js 1.18 KiB [built] ./src/components/CAD/untitled.106.jpg 419 KiB [ (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) @ ./src/components/HomePage.js 7:0-41 @ ./src/components/App.js 3:0-34 12:90-98 @ ./src/index.js 1:0-35 webpack 5.70.0 compiled with 1 error in 84 ms

Intenté modificar webpack.config.js agregando una regla con 'cargador de archivos'. Sin embargo, el problema permaneció. Actualmente, estoy usando "webpack": "^5.70.0". Aquí está mi webpack.config.js:

 const path = require("path"); const webpack = require("webpack"); module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "./static/frontend"), filename: "[name].js", }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", }, }, { test: /\.(jpeg|png|jpg|svg|gif)$/i, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', } } ], }, ], }, optimization: { minimize: true, }, plugins: [ new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("development"), }, }), ], };

He probado muchos enfoques y soluciones diferentes, y no tengo idea de por qué mi webpack.config.js no puede procesar un archivo jpg. ¿Alguien puede decirme la causa raíz de este problema? Muchísimas gracias.