웹팩(webpack)

• 웹팩은 create-react-app을 하면 번거로운 작업을 모두 대신해 주기 때문에 따로 설정할 필요는 없다.

번들러

• 웹팩에 대한 개념을 잡을려면 모듈 번들러(bundler)에 대한 개념이 있어야 한다.
• 모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리를 말한다.
• 모듈 번들러 라이브러리는 웹팩(wepback), Parcel 등 있다.

• 여러 개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 모듈 번들러가 없었다고 가정하고 웹페이지에 접속했다고 가정해보자.

• 이때 웹페이지에서는 페이지를 보여주기 위한 수 많은 자바스크립트 파일을 서버에 요청한다.

• 이를 통해 웹페이지를 보여주기 위해 서버와 여러번 통신하게 되는게 비효율적이다 라고 볼 수 있다.

• 또한 옛날 자바스크립트는 모듈 개념이 없었기 때문에 파일이 나누어져 있어도 변수(Variable) 스코프(Scope)를 생각하면서 개발을 해야했다.

• 이런 문제를 해결하기위해 최신 자바스크립트부터는 모듈 개념이 나왔지만, 지원을 안해주는 브라우저들도 있기 때문에 무언가 브라우저들이 지원할 수 있는 코드로 변환해 줘야한다.

• 따라서 나온 것이 바로 웹팩과 같은 모듈 번들러 라이브러리이다.

• 모듈 번들러는 여러개의 자바스크립트 파일을 하나의 파일로 묶어서 한 번에 요청을 통해 가지고 올 수 있게 하고 최신 자바스크립트 문법을 브라우저에서 사용할 수 있게 해준다.

• 또한 모듈 번들러들은 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다.

• 물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 어마어마해 질 수 있다.

• 모듈 번들러들은 이런 문제를 해결하기 위해 청크, 캐시, 코드 스플릿 개념들을 도입하면서 문제들을 해결하고 있다.

로더(loader)

• 웹팩을 사용하면 SVG파일과 CSS 파일도 불러와서 사용할 수 있다. 이렇게 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당한다.

• css-loader는 CSS 파일을 불러오고, file-loader는 웹 폰트나 미디어 파일 등을 불러온다.

• babel-loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 바벨이라는 도구를 사용하여 ES5 문법으로 변환해준다.

ES5 문법으로 변환하는 이유

• ES5는 이전 버전의 자바스크립트를 의미한다.
• 최신자바스크립트를 ES5형태로 변환하는 것은 구버전 웹 브라우저와 호환하기 위해서이다.