Webpack 이미지 파일 로드 방법

1. file-loader 설치

npm i file-loader

2. webpack.config.js 파일 수정

module: {
    rules: [
      {
        loader: "babel-loader",
        options: { plugins: ["react-refresh/babel"] },
      },

      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: path.join(__dirname, "node_modules"),
      },
      {
        test: /\.(png|jpg)$/,
        use: ["file-loader"],
      },
    ],
  },

webpack.config.ts 파일에 module의 rules부분에 file-loader에 대한 규칙을 넣어준다.

출처:
https://13akstjq.github.io/webpack/2019/10/08/webpack-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-png%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0.html