프론트엔드 개발환경의 이해: webpack

출처 : https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html#2-%EC%97%94%ED%8A%B8%EB%A6%AC%EC%95%84%EC%9B%83%ED%92%8B

웹팩(webpack) : 여러개의 파일을 하나로 합쳐주는 번들러(bundler)

번들(bundle) : 하나로 합쳐진 결과물

1. 웹팩 설치

npm install -D webpack webpack-cli

2. 번들작업 명령어

node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist/main.js

3. 자동 번들작업

4. 로더

웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만아니라 스타일시트, 이미지, 폰트까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올수 있다.

이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만아니라 CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 해준다

5. 자주 사용하는 로더

• css-loader
• style-loader
• file-loader
• url-loader

6. 플러그인

로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다.