[JavaScript] 웹팩

웹팩이란?

자바스크립트 애플리케이션의 모듈 번들을 위해 사용되는 오픈 소스 모듈 번들러

 

모듈

모듈은 자바스크립트 애플리케이션을 구성하는 개별 단위 파일
종류에는 자바스크립트 모듈, CSS 모듈, 이미지 파일 / 폰트 파일, 라이브러리 모듈 등이 있습니다.

 

모듈의 장점

• 유지보수성
• 네임스페이스화
• 재사용성

 

모듈 시스템

자바스크립트의 모듈들을 독립적으로 분리하고 의존성을 정의하는 시스템을 말합니다.

종류

1. CommonJS
   • 주로 Node.js 환경에서 사용
   • 다른 모듈을 사용할때 require을, 모듈을 해당 스코프 밖으로 보낼 때에는 module.exports를 사용

// math.js
module.exports.add = function(a, b) {
    return a + b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5

2. ES Module
   • ES6에 도입된 모듈 시스템
   • <script> 태그에 type="module" 속성 추가
   • 해당 속성 추가 시 모듈 별 스코프 생성
   • 다른 모듈을 사용할때 import을, 모듈을 해당 스코프 밖으로 보낼 때에는 export를 사용

// math.js
export function add(a, b) {
    return a + b;
};

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

 

웹팩 등장 배경

1. 모든 모듈이 전역 스코프를 공유하여 네임스페이스 충돌
   • 해당 문제를 해결하기 위해 파일들을 모듈화하고 모듈 시스템을 통해 해당 모듈 내에서만 유효한 스코프를 가질 수 있었습니다.
   • 이외에도 IIFE(Immediately Invoked Function Expression)를 이용하여 함수 스코프를 생성하는 방식을 사용하기도 하지만 잘 사용하지 않습니다.
2. 모든 모듈을 일일이 서버에 요청해야하기 때문에 과도한 HTTP 요청 (서버 부하)
   • 모듈 시스템을 통해 1번 문제는 해결했지만 그럼에도 모듈마다 HTTP 요청을 보내는 문제는 여전히 발생했습다.
   • 해당 문제를 해결하기 위해 모듈 번들러를 통하여 모듈을 한 파일로 번들링하여 서버 부하를 낮췄습니다.

---

웹팩

모듈, 모듈 시스템, 웹팩의 등장 배경에 대해 설명했으니 본격적으로 웹팩에 대하여 설명하도록 하겠습니다.

앞서 설명하였지만 웹팩은 하나의 진입점으로부터 의존하고 있는 파일들을 전부 모아서 하나의 파일로 만들어주는 모듈 번들러입니다.

 

웹팩 구성요소

const path = require('path');

module.exports = {
  entry: './src/index.js',  // 엔트리 포인트
  output: {
    filename: 'bundle.js',  // 번들 파일명
    path: path.resolve(__dirname, 'dist'),  // 출력 디렉토리
  },
  module: {
    rules: [
      {
        test: /\.css$/,  // CSS 파일 처리 규칙
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',  // HTML 템플릿 파일
    }),
  ],
};

 

1) 엔트리 (entry)

• 파일 진입점
• 웹팩은 이 파일부터 모듈 의존성을 따라가며 모든 모듈을 분석합니다.

2) 출력 (output)

• 번들된 파일이 저장될 위치와 파일 이름을 지정합니다.

3) 로더 (loader)

• 자바스크립트 파일이 아닌 웹 자원 (HTML, CSS, Images, 폰트 등) 을 웹팩이 이해할 수 있도록 도와주는 속성입니다.

4) 플러그인 (plugin)

• 번들링된 파일을 추가로 처리하기 위한 속성입니다.

 

웹팩 동작 과정

1. 설정 파일 읽기: webpack.config.js 파일을 읽어 설정을 로드
2. 엔트리 포인트에서 시작: 지정된 엔트리 포인트부터 번들링 시작
3. 의존성 그래프 생성: 모든 모듈 간의 의존성을 분석하여 그래프를 생성
4. 로더를 통해 모듈 처리: 각 모듈을 적절한 로더를 사용하여 처리
5. 번들링: 처리된 모듈들을 하나의 파일로 번들링
6. 코드 스플리팅: 코드 스플리팅을 통해 여러 청크로 분리
7. 플러그인을 통한 추가 처리: 플러그인을 사용하여 추가적인 번들링 작업을 수행
8. 출력: 최종 번들을 출력 디렉터리에 저장

 

의존성 그래프란?

모듈 간의 의존성을 시각적으로 표현한 그래프를 말합니다.
웹팩은 의존성 그래프를 사용하여 애플리케이션의 모듈들을 분석하고 번들링합니다.
엔트리 포인트에서 시작하여 모든 의존성을 따라가며 모듈을 트리 형태로 분석합니다.

 

※ 의존성 그래프 생성 과정

1. 엔트리 포인트 설정
2. AST 생성
   • 엔트리 포인트 파일을 읽고, JavaScript 파서를 통해 AST로 변환
3. 모듈 분석
   • AST를 분석하여 import문 찾아 의존성 파악
   • import된 모듈에 대해 재귀적으로 동일한 과정을 수행하여 의존성 트리 확장
4. 모듈 캐싱
   • 이미 분석된 모듈은 다시 분석하지 않고 캐시된 결과 사용

 

Reference

https://wonsss.github.io/webpack/webpack-all-in-one

https://juneyr.dev/2019-02-20/webpack-babel

Webpack과 babel이 뭐요

https://80000coding.oopy.io/a9e13d5e-e858-40f5-a80f-dbb50d0b65f4

[JavaScript] 모듈이란?

https://bravenamme.github.io/2020/02/12/what-is-babel