[React] 이미지파일 import 실패 에러 해결방법

💢 이미지파일 import 실패

 

▪에러내용 : png react Module parse failed: Unexpected character (1:0)

 

▪원인 : 이미지파일 loader 부재

 

▪해결방법:

1. install file-loader

$ npm install file-loader --save-dev

2. add loader to webpack.config.js

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

webpack.config.js

1, 2를 차례대로 수행한 후에 이미지파일을 다시 import 해보면 문제없이 잘 컴파일된다.

 

 

참고자료

https://v4.webpack.js.org/loaders/file-loader/