How to import img from path by webpack 5? - reactjs

Question

I know this sounds ridiculous, but yes, I don't know how to import an img using webpack 5. What I want to do is just import an img which is located in the project folder and I want to import it into one of my react functional component and then to draw it on the <canvas> component.
My current webpack.config.js is as follow:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const outputDirectory = 'dist';
module.exports = {
entry: ['babel-polyfill', './src/client/index.js'],
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
"#babel/preset-env",
["#babel/preset-react", {"runtime": "automatic"}]
]
}
}
}, {
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}, {
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: [{
loader: "url-loader",
options: {
limit: 100000
}
}, {
loader: "css-loader",
options: {
sourceMap: true
}
}]
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
port: 3000,
open: true,
historyApiFallback: true,
hot: true,
host: '0.0.0.0',
headers: {"Access-Control-Allow-Origin": "*"},
proxy: {
'/api': 'http://localhost:8080'
}
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new MiniCssExtractPlugin({
filename: "./css/[name].css"
})
]
};
The error message I got:
ERROR in ./public/floors.png 1:0
[1] Module parse failed: Unexpected character '�' (1:0)
[1] 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
[1] (Source code omitted for this binary file)
[1] # ./src/client/app/pages/WorkspaceGenerator.js 19:0-48 98:15-18
[1] # ./src/client/app/App.js 19:0-60 66:42-60
[1] # ./src/client/index.js 2:0-28 4:35-38
[1]
[1] webpack 5.38.1 compiled with 1 error in 589 ms
[1] ℹ ｢wdm｣: Failed to compile.
The hierarchy of the project I'm working on:
but you know what? I really don't know where to start to find the resource to do that, there are just too many things on their website written in a non-human-readable way! Please help!

Answer 1

Problem
You've included css-loader as a use rule for png|woff|woff2|eot|ttf|svg assets, however css-loader doesn't handle image assets. Please remove it as a rule for that particular test and either only use url-loader or file-loader.
Solution
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const outputDirectory = "dist";
module.exports = {
entry: ["babel-polyfill", "./src/client/index.js"],
output: {
path: path.join(__dirname, outputDirectory),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-env",
["#babel/preset-react", { runtime: "automatic" }],
],
},
},
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: [
{
loader: "url-loader", // "file-loader"
options: {
limit: 100000,
},
},
],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
devServer: {
port: 3000,
open: true,
historyApiFallback: true,
hot: true,
host: "0.0.0.0",
headers: { "Access-Control-Allow-Origin": "*" },
proxy: {
"/api": "http://localhost:8080",
},
disableHostCheck: true,
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
new MiniCssExtractPlugin({
filename: "./css/[name].css",
}),
],
};
Result