How to import img from path by webpack 5?

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