1. 목표

---

• 몇가지 필수적인 Loader와 Plugin을 알아보고 도입해보자

2. 과정

---

2-1. Loader

css-loader와 style-loader

npm install -D css-loader style-loader 

• css-loader : @import나 url()로 사용된 css파일을 처리해준다.
• style-loader : 처리된 css를 html의 스타일 시트로 넣어준다.
• styled-components의 경우 이 둘을 안깔아도 돼서 난 안깔 듯. sass를 사용하는 경우에는 sass-loader를 깔아야한다.

file-loader

npm install -D file-loader

• 이미지, 폰트 들의 파일을 처리해준다.

eslint-loader

npm install -D eslint-loader

• js, jsx 코드에 대해 린팅을 수행할 수 있게 한다.

---

2-2. Plugin

CleanWebpackPlugin

npm install -D clean-webpack-plugin

• build를 하기 전에 dist 폴더를 청소해서 이전 빌드 파일들을 제거해준다.

3. 어떻게 개선해 나갈 것인가

---

프로젝트를 시작한 것도 아니고 추가적으로 어떤 것들이 필요할지 모르는 시점이기 때문에 사이드 프로젝트를 진행해가면서 필요한 것들을 넣고, 번들링 최적화도 해볼 예정이다.

4. reference

---