웹팩의 이해

오늘은 인터뷰에서 잘 대답하지 못한 김에 웹팩에 대해 간단하게 정리하겠습니다.

웹팩이란

일반적으로 javascript 기반 언어로 개발을 할때는 js 파일들을 모듈화 하여서 여러 파일로 관리하는 방식으로 개발합니다. 웹팩은 이런 개별로 저장되어 있는 js 파일들을 한 파일에 모아주는 역할(번들)을 합니다. 그리고 그것 뿐 아니라 css파일과 img 파일 등도 압축하여서 저장합니다.

웹팩 설정하기

1. webpack을 설치한다.
2. webpack.config.js에서 원하는 웹팩 설정을 할 수 있습니다.

설정 종류

1. entry
   웹팩에서 번들할 폴더를 선택합니다. 그럼 정해진 폴더 하위 폴더를 모두 번들할 수 있게 됩니다.
2. output
   이제 번들링한 파일들을 저장할 공간을 지정합니다.
3. loader
   loader는 웹팩에서 어떤 형식의 파일을 어떤 로더를 사용하여 번들할지를 결정할 수 있습니다.
   • css파일은 css-loader를 이용해야합니다.
   • babel또한 loader로 설정하여 상위 버젼의 js파일을 es5문법으로 트랜스 파일링 할 수 있습니다.
   • typescript 또한 ts-loader를 이용하여 es5문법의 js파일로 트랜스 파일링 해야합니다.
4. plugin
   플러그인을 이용하면 좀 더 개발을 편하게 할 수 있게 설정할 수 있습니다.
   • html-webpack-plugin을 이용하면 번들한 후에 output에 저장되는 폴더 내에 자동으로 index.html을 생성해줍니다.

웹팩 설정을 너무 오래전에 해보고 계속 cra를 사용하다가 오늘 면접 질문에 갑분 등장해서 제대로 대답하지 못한 점이 좀 아쉽긴한데 오늘을 계기로는 절대 안 까먹을 것 같습니다.