[React] 리액트 웹팩(webpack) 이미지 경로 설정하기

 

리액트 웹팩

 

 

리액트 웹팩(webpack) 이미지 경로 설정

 

 

웹팩 설정이 참으로 복잡하던와중.. 하나하나 알게된 점을 기록해 놓으면 좋을 것 같아 작성해봅니다.

 

webpack.config.js 파일을 설정해서 번들링했을때 dist 폴더에 내가 작성한 코드며 이미지며 가득 차버린다. 그래서 이미지는 imgs 폴더를 따로 만들어서 빼고 싶어서 웹팩 설정 방법을 알아봤습니다.

 

 

webpack.config.js

---

module.exports = {
  module: {
    rules: [
      {
         test: /\.(png|jpe?g|gif)$/i,
         loader: 'file-loader',
         options: {
             name: 'imgs/[name].[ext]', //[폴더명][파일명][ext]
         },
       }
    ],
  },
};

 

이미지 파일들은 이름 그대로 'file-loader'에서 읽어와 위에 설정대로 처리해주는데요. test에는 정규식으로 이미지파일 확장자를 넣어주고 중요한 부분은 options - name 에는  [폴더명][파일명][확장자] 순으로 작성해주면 끝

 

웹팩 번들링 해주면 imgs 폴더 안에 알아서 이미지 파일은 자동으로 들어갑니다.

 

 

해당 내용은 아래 웹팩(Webpack) 공식문서를 참조했습니다.

 

file-loader | webpack