[Webpack] file-loader outputs [object Module]

토이 프로젝트를 진행하는 도중에 img 태그 src 속성에 assets 폴더에 있는 이미지 경로를 넣어줬는데 크롬 개발자 도구로 확인해 보니 [object Module] 값으로 들어가 있어서 webpack.config.js 관련 설정에 문제가 있는다고 판단되었습니다.

그래서 file-loader 관련 options 값을 추가해주니 정상적으로 이미지 경로가 불러와 졌습니다.

 

기존 webpack.config.js

{
        test: /\.(png|jpe?g|gif)$/i,
        use: [ 'file-loader' ]
     },

 

변경 후 webpack.config.js

{
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,
            },
          },
        ],
     },

 

참고한 URL : https://stackoverflow.com/questions/59070216/webpack-file-loader-outputs-object-module

                      https://github.com/webpack-contrib/html-loader/issues/203