TS + React + webpack 기반의 개발 환경 구성(feat. loader, HMR)

지난 webpack 핵심 컨셉 포스트에 이어서 프로젝트에 사용할 webpack 설정 파일을 작성한 과정에 대해 담아 보려 합니다.

목차는 다음과 같습니다.

• webpack 설정
• babel-loader 적용
• ts-loader 적용
• react 설정 
• HMR 적용

위 키워드 외 eslint, prettier, jest 등 기타 설정에 대한 내용은 추가로 포스팅하겠습니다. 

 

React + TS 환경을 구성하는 각 과정을 패키지별로 나누어 설명하기에는 패키지 간 의존이 다소 깊습니다.
개연성이 다소 떨어질 수 있어요.

꼬리의 꼬리를 무는 구조이다 보니 전체 설정이 끝나기 전까지 설정에 대한 피드백을 받기 어렵습니다.

차근히 따라 해 보는 용도로 봐주시면 감사하겠습니다

(모든 설정이 끝나고 로컬에서 띄워지는 화면을 보면 희열이 있답니다😅)

---

1. webpack 설정

우선 webpack 관련 패키지를 설치합니다.

 

• webpack-cli : 웹팩의 커멘드라인 인터페이스를 제공
• webpack-dev-server : 웹팩의 개발 서버 관련 기능을 제공
• html-webpack-plugin : html 파일 생성 및 번들 파일 자동주입 플러그인

---

1-1. 설정 파일 작성 방식

설정 파일을 커스텀할 때 development 환경과 production환경을 구분하여 처리하는 방법은 크게 2가지가 있습니다.

1. 하나의 설정 파일 내부에서 환경에 따라 분기하기
2. 환경에 따라 설정 파일을 나누어 작성하기

개인적으로는 어떤 속성을 어떻게 사용했는지 명확하게 구분하여 보고 싶었고, 이를 위해 후자를 선택했습니다.   

---

1-2. webpack.common.js

모든 환경에서 적용될 공통 속성을 정의하는 파일입니다. 

 

보편적인 react 렌더링 시작점 파일(root) 경로를 entry 속성으로 지정했습니다.

또한 root div가 포함된 html 파일을 번들파일을 주입될 템플릿으로 지정했습니다.

 

• resolve.extensions: 웹팩에게 모듈의 확장자를 해석하는 방식을 알려주어
  import시 배열에 나열한 확장자들에 대해 확장자 생략이 가능하게 하는 속성

---

1-3. webpack.dev.js

 development 환경에서 적용될 속성을 정의하는 파일입니다. 

merge 메서드를 통해 공통 설정파일과 dev 환경 설정을 병합할 수 있습니다.

 

• devServer.historyApiFallback: URL 직접 접근 혹은 새로고침시 404 page 대신 index.html로 이동시키는 기능 
• devServer.open: 서버 시작후 바로 브라우저가 열리도록 하는 기능 

---

1-4. webpack.prod.js

production 환경에서 적용될 속성을 정의하는 파일입니다. 

 

• output.filename의 contenthash: 파일의 내용 변경에 따라 해시값을 변경하는 옵션
  브라우저의 캐싱으로 인해 사용자가 새로운 배포 버전을 사용하지 못하는 상황을 방지하기 위해 사용
  
  
• output.clean: 번들링 시 기존 번들링 결과물을 삭제하는 옵션. 예상치 못한 충돌을 방지할 수 있다.
  

 

---

기본적인 설정은 끝났습니다. 

위 구조를 바탕으로 여러 loader와 plugin을 적용하며 설정 파일이 더 커지게 됩니다...!

---

2. babel-loader 적용

다음으로 babel 관련 패키지를 설치하겠습니다.

 

• @babel/core: 바벨의 트랜스 파일링 수행을 위한 기능을 제공
• @babel/preset-env:  트랜스 파일링할 기능을 지정하는 플러그인을 번들로 묶어 제공
• @babel/preset-react: jsx를 js 코드로 변환하기 위한 기능을 제공
• core-js: 바벨의 트랜스 파일 과정에서 폴리필(polyfill)을 제공
• babel-loader: webpack 번들 과정에서 바벨의 트랜스 파일링을 수행하도록 함

---

2-1. bable.config.js

프로젝트 전역으로 적용할 바벨 속성을 정의하는 파일입니다.(root 경로에 위치)

 

• presets - preset-env
  • useBuiltIns: 'usage', 'entry' 옵션 중 선택
    • usage: 실제로 사용한 코드의 폴리필만 삽입
    • entry: 전체 폴리필 삽입
  • corejs: polifill을 제공하는 주체인 corejs의 버전 명시
    
• presets - preset-react: react에서 필요한

 

*프로젝트에서는 브라우저 지원범위를 포함한 기타 옵션들을 아직 확정하지 않았습니다.  

---

2-2. babel-loader 적용

webpack.common.js 파일에 babel-loader 관련 설정을 추가해줍니다.

 

.ts, .tsx 확장자를 가진 파일에 대해서만 babel-loader를 적용하도록 설정했습니다.

node_modules 는 babel의 트랜스 파일 대상에서 제외했습니다.

 

*프로젝트에서는 ts-loader를 사용해 ts -> js 트랜스파일 하기로 했습니다.

우선 .ts, .tsx를 대상으로 적어두고 넘어갑니다. (아래 ts-loader 문단에서 나옵니다.)

---

3. ts-loader 적용

다음으로 ts 관련 패키지를 설치하겠습니다.

 

• ts-loader: webpack 번들 과정에서 ts -> js 트랜스 파일을 수행하도록 함

---

3-1. tsconfig.json 

프로젝트 전역으로 적용할 tsc 설정을 정의하는 파일입니다.(root 경로에 위치)

 

• compilerOptions
  • target: 어떤 버전의 js 파일로 트랜스 파일링 할것인지 정하는 옵션 (보통 es6를 많이 사용하고 기본값이다.)
  • lib: 프로젝트에서 사용할 특정 문법에 대한 type 파일을 제공하는 옵션 (target 옵션에 따라 기본값이 지정된다.)
  • jsx: .tsx 파일의 트랜스 파일링 방식을 지정하는 옵션 (_jsx 함수의 호출로 반환하도록 react-jsx 옵션을 사용)
  • module: 트랜스 파일된 결과물이 사용할 모듈방식을 지정하는 옵션(target 옵션에 따라 기본값이 지정된다.)
  • moudleResolution: 트랜스 파일링시 모듈의 해석방식을 지정하는 옵션
  • resolveJsonModule: .json 파일을 모듈로 해석할 수 있게 하는 옵션(.json 파일의 import가 가능해진다.)
  • allowJs: .js 파일을 허용하는 옵션
  • isolatedModules: 프로젝트 내 모듈 생성을 강제하는 옵션(단일 파일 기반 트랜스 파일러에서 발생할 수 있는 문제 해결)
  • esModuleInterop: CommonJS, AMD, UMD 같은 모듈 방식을 es6 모듈 인것 처럼 사용하게 해주는 옵션
  • forceConsistentCasingInFileNames: 파일의 대소문자를 구문하게 해주는 옵션
  • strict: 타입스크립트의 각종 타입 체킹 동작을 전부 활성화하는 옵션
  • noFallthroughCasesInSwitch: switch 문을 올바르게 사용하도록 강제하는 옵션
  • skipLibCheck: 모든 선언 파일(.d.ts)의 타입 체킹을 스킵하는 설정이다. (라이브러리에서 제공하는 .d.ts 파일은 이미 타입 체킹이 된 파일일 것이라는 가정)

---

3-2.  ts-loader 적용

webpack.common.js 파일에 ts-loader 관련 설정을 추가해줍니다.

---

4. React 적용

react 관련 패키지를 설치합니다.

---

4-1. react 프로젝트 기본 디렉터리 및 파일 추가

root를 생성할 index.tsx,

root div를 포함하는 index.html 파일을 생성합니다.

---

5. HMR 적용

HMR 관련 패키지를 설치합니다.

---

5-1. react-refresh/babel 적용

plugins 속성에 추가해 줍니다.

---

5-1. react-refresh-webpack-plugin 적용

plugins 속성에 추가해 줍니다.

---

6. 최종 확인!!!

이제 지금까지의 설정이 잘 동작하는지 확인해봅시다.

---

HMR 동작까지 확인!

여러 설정들이 잘 적용되어 번들링이 성공했음을 알 수 있고,

개발 서버 실행 + HMR도 잘 동작하는 것을 확인할 수 있습니다😀

---

지금까지 TS + React + webpack 기반의 개발환경을 직접 구성해봤습니다.

 

위 설정만으로도 개발을 시작할 수 있지만,

일관된 코드 스타일을 유지하기 위한 eslint, prettier와 같은 설정이 필요할 수도 있습니다.

 

eslint, prettier, jest 등 기타 설정에 대한 추가 포스팅으로 다시 돌아오겠습니다😉

 

 

 

 

기본이 중요하다!