인프런 커뮤니티 질문&답변

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
    assetModuleFilename: "[name][ext]?[hash]"
  },
  module: {
    rules: [
      {
        test: /\.css$/, // css 확장자로 끝나는 모든 파일을 의미
        use: ["style-loader","css-loader"], // style-loader 및 css-loader 적용
      },
      {
        test: /\.png$/i, // png 확장자로 끝나는 모든 파일을 의미
        type: "asset/resource" // file-loader와 같은 효과
      }
    ],
  }
}

저도 webpack 5 버전에서 실행시킬 경우 이미지가 나오지 않는 이슈가 있었습니다.

webpack.config.js  파일을 아래와 같이 변경해 보시기 바랍니다.

아래 소스는 '윤재'님의 댓글에 달린 https://webpack.kr/guides/asset-modules/ 를 참고하여 작성했습니다.

const path = require('path');
const MyWebpackPlugin = require('./my-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        main : './src/app.js'
    },
    output: {
        // resolve = 절대 경로 설정
        path: path.resolve('./dist'),
        filename: "[name].js",
        assetModuleFilename: "[hash][ext][query]"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                type: 'asset/resource',
                generator: {
                    filename: '[name][ext][query][hash]'
                }
            }
        ]
    },
    plugins: [
        new MyWebpackPlugin(),
    ]
}

webpack 5 부터 asset 모듈로 대체 되었습니다.

https://webpack.kr/guides/asset-modules/