[Webpack] webpack

💡 다시 한 번, 웹팩은 모듈 번들러 이다!

📚 용어

모듈(module)

---

A module is one of the separate parts.

• 자바스크립트에서의 모듈이란 기능 단위의 "자바스크립트 개별 파일"이라고 생각하면 됩니다.

번들러(bundler)

---

• 번들이란 여러 파일, 여러 구성을 합치는 것을 말하므로 번들러란 합치게 해주는 것을 말합니다.
• 모듈화된 파일들을 하나로 묶어 관리해야하므로 번들러의 역할이 중요해졌습니다.
• 모듈간의 의존성을 파악하여 하나의 파일로 만들어줍니다.
• npm run build 후에 하나의 자바스크립트 파일로 나온 결과물이 바로 번들된 결과입니다.
• ex) webpack, RequireJS, Rollup, Parcel
  

https://webpack.js.org/

• 왼쪽에 서로 종속관계인 파일들을 → 웹팩을 통해 → 하나로 깔끔하게 모아줍니다.

🧐 도대체 이게 뭐 대단한데?

🤔 왜? 왜 여러 모듈(파일)을 정리하는 번들러가 필요한 걸까요? 우리는 이미 웹팩이 기본 내장된 create react app에 너무 익숙해져있기 때문에 웹팩의 소중함을 알지 못합니다.

History.

---

• 리액트에서 당연하다는 듯이 컴포넌트 별로 파일을 하나씩 만들어서 개발을 합니다.
• 라떼는☕️ UI 컴포넌트별로 파일을 나누지 않고, 필요한 기능을 하나의 js 파일에 전부 작성하기도 했는데요.
• 점점 프론트앤드 고도 기술이 요구되고, 코딩량도 많아지면서 아래와 같이 UI 컴포넌트 별로 파일을 나누면서 유지보수가 좋아지기 시작합니다.
  

Problem.

---

하지만 이렇게 하나의 페이지에 필요한 자바스크립트 파일들이 여러개 있다면 무슨 문제가 있을까요?

1. 파일 하나하나 HTTP 통신을 통해 서버에 요청이 있고! js 파일이 올 때까지 기다리기 때문에 화면 로딩시간이 오래 걸립니다.

→ 이렇게 one by one으로 파일을 요청하고 응답받기 때문에 파일 개수가 많아질 수록 요청이 많아진다구요!

💡 유지보수 좋게 한다고 다 모듈화 시키면 렌더링 퍼포먼스가 안 좋아지기 때문에, 개발은 파일별로 하되 실제 브라우저에서는 하나의 파일만 있는 것이 좋겠네요. 그래서 웹팩이 바로 여러 js 파일을 하나로 만들어주는 것입니다!

2. 여러 파일로 나눴는데 서로 종속관계라면?

   이 경우에 여러 개로 쪼갠 파일의 로드 순서가 중요합니다. 왜냐하면, 아래와 같이 mypage.js와 main.js 파일이 있는데 mypage.js에서 getUser 함수를 호출하기 때문에 main.js 파일은 무조건 mypage.js 보다 먼저 로드 되어야 합니다.

   // mypage.js
   
   const user = getUser();

   // main.js
   
   const getUser = () => {};

   <!-- script 순서가 중요해! -->
   <script src="main.js" />
   <script src="mypage.js" />

위의 경우는 두 개 뿐이라서 쉽지.. 실제 개발하다보면 파일이 몇 백개 되기 때문에 순서를 알 수가 없습니다.

💡 웹팩이 모듈의 종속(dependecy) 관계를 파악하고 알아서! 잘 하나의 파일로 만들어줍니다.

웹팩이 왜 필요하고, 무슨 역할을 하는지 다 아셨죠? 😘

• 웹팩은 js 파일 뿐만 아니라, img, css, mp4 등 다양한 리소스를 모두 모듈로 관리하여 서로의 이존성을 관리합니다.
• 이외에도 개발 단계에서 사용하는 dev server, 필요할 때 import하는 dynamic import, 모듈을 하나의 파일로 만들지 않고 의존성을 따져 나눠서 빌드하는 code spliting 등을 지원합니다.

바로 이 느낌.