[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 등을 지원합니다.

바로 이 느낌.