[리액트] 웹팩 webpack

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다.

 

웹팩의 기본 개념 이해하기

: 다양한 기능 제공

- 파일 내용을 기반으로 파일 이름에 해시값 추가 => 효율적으로 브라우저 캐싱 이용

- 사용되지 않은 코드 제거

- JS에서 CSS,JSON, 텍스트 파일 등을 일반 모듈처럼 불러오기

 (자바스크립트 안에서 여러가지를 처리할 수 있다)

- 환경변수 주입

 

* 웹펙을 사용하는 가장 큰 이유 => 모듈 시스템(ESM, commonJS)을 사용하고 싶어서

 

- 웹사이트가 점점 동적으로 변하면서 많은 js파일이 필요하게 됨

=> 선언된 자바스크립트 파일의 순서에 따라서 동작이 달라질 수 있다.

=> 외부라이브러리와 내부의 파일들이 서로 싱크가 맞아야 하는데 그 문제를 해결해준다.

  (변수 이름 충돌 같은 것은 빌드단계에서 잡아낼 수 있고 외부라이브러리는 npm으로 관리를 할 수가 있다고 함..)

- 요즘 브라우저는 ESM을 지원해서 웹팩을 사용하지 않고도 서비스 할수 있지만 오래된 브라우저도 서비스를 해야하고, 많은 오픈 소스가 commonJS로 작성되어있고, 요즘 브라우저는 commonJS를 처리를 못한다.

 

웹팩에 필요한 패키지 설치

npm install webpack wepack-cli react react-dom

 

npx 실행

 

 

 

나중에 읽어볼 링크

[JS][WEBPACK] 1. 웹팩이란 무엇인가