Webpack과 Babel을 위용한 React 개발 환경 구성하기

최근 프로젝트 중에 Webpack과 Babel에 대해 이야기를 많이 들었습니다. 필자는 프론트엔드에 대해서 비기너이고, 보통 프로젝트를 구성할때 CRA를 통해서 구성하는데, 이때는 웹팩을 건드는 일이 거의 없는 것 같습니다.

이번에는 CRA가 아닌 Webpack과 Babel을 통하여 React를 개발 환경을 구성해보겠습니다.

 

참고 자료 : https://berkbach.com/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766

Webpack과 Babel을 이용한 React 개발 환경 구성하기

 

Webpack, Babel, React 개발 환경 구성에 대한 가이드 및 설명에 대한 부분의 위의 링크를 참고하였고, 매우 설명이 잘 되어 있습니다.

 

추가로 저는 js 확장자가 아닌 jsx 확장자를 이용하여 파일을 생성하였는데, 위의 가이드로만으로는 jsx 파일을 로드하지 못합니다.

이러한 문제에 대해서 찾아보니 webpack.config.js 파일 내에서 resolve.extensions에 대한 속성을 추가해 주면 됩니다.

// webpack.config.js

module.exports = {
	...
    resolve: {
      // 5
      extensions: [".js", ".jsx", ".ts", ".tsx"],
    },
    module: {
      ...
    }
}

 

웹팩 공식 문서에 자세한 내용을 확인 할 수 잇습니다.

https://webpack.kr/configuration/resolve#resolveextensions

Resolve | 웹팩