<!--src/index.html-->

<div class="image">
  <img id="mainImage" alt="main image" />
</div>

// src/index.js

// 이미지 파일 가져오기
import mainImage from "./assets/image.jpg";

// DOM을 통해 img 태그 src 속성에 이미지 파일 넣기
const img = document.getElementById("mainImage");
img.src = mainImage;

ERROR in ./src/assets/image.jpg 1:0
Module parse failed: Unexpected character '�' (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/index.js 4:0-43 8:10-19

webpack 5.90.3 compiled with 1 error in 1100 ms

// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [

      // 로더 추가
      {
        // 타겟으로 지원할 여러 확장자들 지정
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        type: "asset/resource",
      },
    ],
  }
};

// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name][contenthash].js",
    clean: true,

    // 해당 설정 추가
    assetModuleFilename: "[name][ext]",
  }
};