개발 환경 설정

웹팩과 바벨을 이용한 초기 셋팅

선택한 이유: Create-React-App(CRA)는 싱글 페이지 애플리케이션이다. 한번만 리소스를 로딩하는 SPA의 렌더링 방식으로 기본적으로 웹팩 및 바벨 설정 등이 숨겨져 있다. 하지만 사용하지 않는 기능 또한 모두 포함되어 있기에 원치 않는 용량과 패키지가 존재한다.

결론: compile 속도가 빠름, CRA와 비교 시 용량과 패키지 수가 적음.

packages 상세 설명

webpack 개발한 app을 webpack으로 번들링할 수 있도록 허용해주는 역할

webpack-cli command line에서 webpack을 사용 할 수 있도록 도와주는 역할

webpack-dev-server 수동으로 페이지를 새로 고치지 않고도 변경 사항을 볼 수 있도록 웹 페이지를 실시간으로 다시로드하는 데 사용됨

path 말 그대로 경로를 찾는데 사용되는 패키지

html-webpack-plugin 자동으로 html을 wepack으로 묶어지게 도와주는 역할

webpack이 자동으로 src/index.js파일 컴파일하고 결과물은 dist/main.js에 간략화된 코드를 보여주고 있다.

 

@babel/core ES6이상의 버전을 ES5로 컴파일하는데 사용

@babel/preset-env 지원하려는 브라우저 매트릭스를 기반으로 사용할 변환 또는 플러그인과 폴리 필 (즉, 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공)을 결정함

@babel/preset-react React 코드를 ES5로 컴파일하는데 사용

@babel-loader Babel을 사용하여 JavaScript 종속성을 변환하는 Webpack 도우미 (즉, import 문을 필수 항목으로 변환)

style-loader DOM에 스타일을 주입해주는 역할 injects a style tag inside the HTML file.

css-loader 프로젝트에 존재하는 css 파일들을 import 할 수 있게 해주는 역할

image-webpack-loader 프로젝트에 이미지들을 로드할 수 있게 해주는 역할

 

참고 자료

https://dev.to/deadwing7x/setup-a-react-app-with-webpack-and-babel-4o3k

https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

https://simsimjae.tistory.com/447