웹팩은 다양한 기능을 제공한다
- 파일내용을 기반으로 파일 이름에 해시값 추가
- 사용되지않는 코드제거
- 자바스크립트 압축
- JS에서 CSS, JSON, TXT파일 등을 일반 모듈처럼 불러오기
- 환경변수주입
- 모듈시스템(ESM / commonJS) 사용
웹팩실행법
npm install webpack webpack-cli react react-dom
npx webpack
As-Is
<html>
<head>
<script src="js01.js"></script>
<script src="js02.js"></script>
<script src="js03.js"></script>
<!-- ... -->
<script src="js0999.js"></script>
</head>
</html>To-Be
<html>
<head>
<script src="dist/app.js"></script>
</head>
</html>
프론트엔드개발