웹팩(webpack) 이란?

심서현·2022년 11월 12일

JavaScript 애플리케이션을 위한 모듈 번들러

모듈 번들러는 모듈을 번들링하는 도구이다.

모듈(module)? 번들러(bundler)?

하나씩 천천히 알아가보자.

웹팩에서의 모듈

자바스크립트 파일 뿐만 아니라 애플리케이션을 구성하는
HTML, CSS, JavaScript, Image, Font 등 많은 파일을 의미한다.

번들러

애플리케이션을 구성하는 모든 모듈을 병합하고 압축하여 만들어진 하나이상의 파일을 번들이라고 한다.
이러한 동작을 모듈 번들링이라고 한다.

따라서 웹팩은 모듈들을 병합하고 압축하는 번들링을 하는 도구이다.

필요성

모듈화의 필요성

script가 커지게 되어 js에서 모듈화가 필요했기에 이를 번들링할 번들러가 필요했다.

빠른 로딩속도와 높은 성능

웹팩을 사용하여 많은 파일(모듈)을 병합하고 압축해 하나의 결과물(번들)로 만들면, 파일의 수와 크기가 줄어든다.
따라서 애플리케이션을 실행시키기 위해서 결과물만 읽어들이면 되기 때문에 로딩 시간을 줄일 수 있다.

핵심요소

앤트리 (Entry)

번드링을 시작하기 위한 최초 진입점이다.
진입점으로 부터 의존적인 모듈을 전부 찾아낸다.
이때 모듈간의 의존 관계로 생기는 구조를 디펜던시 그래프(Dependency Graph) 라고 한다.

module.exports = () => {
    entry: "./src/index.js",

    // or

    entry: ['./src/index.js'],

    // or

    entry: {
      bundle: './src/index.js'
    },
}

html에서 사용할 자바스크립트의 진입점을 entry 에 넣어준다. entry 가 여러개일 경우 배열로 적어도 된다. entry 의 이름을 따로 지정해주고 싶다면 object 로 작성 할 수 도 있다.

아웃풋 (Output)

앤트리를 시작으로 의존되어있는 모듈을 하나로 묶어 결과물로 만든다.
이 결과물이 위치하는 경로를 아웃풋이라고 한다.

const path = require('path');

module.exports = () => {
  output: {
    path: "./dist",
    filename: "bundle.js",

    // or

    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
}

path 는 번들링된 파일을 저장할 경로이고, filename 은 번들링된 파일의 이름이다.

path 에는 경로를 직접 입력할 수 있지만, 아래와 같이 많이 사용하는 것 같다. __dirname 은 노드에서 제공하는 현재 디렉토리의 경로에 대한 변수이다.

filename 도 직접 입력 할 수 있지만, 아래와 같이 입력하면 entry 에서 따로 이름을 정해주었다면 그 이름으로 생성된다.

로더 (Loader)

웹팩은 자바스크립트 모듈밖에 읽지 못한다.
그래서 HTML, CSS, Image, Font 들을 웹팩이 읽을 수 있게 변환하는 것을 로더라고 한다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

test는 로더를 적용할 파일 형식으로 일반적으로 정규 표현식 사용한다. use는 해당 파일을 처리할 로더의 이름이다.

배열로 설정하면 뒤에서부터 앞으로 순서대로 로더가 동작한다. 이제 웹팩은 .css 확장자로 끝나는 모듈을 읽어 들여 css-loader를 적용하고 그 다음 style-loader를 적용한다.

플러그인 (Plugin)

요약하자면 로더가 할수 없는 작업을 수행한다고 생각하면 된다.

로더가 파일(모듈)을 해석하고 변환하는 과정에 필요한다면, 플러그인은 결과물(번들)에 추가적인 처리를 하고싶을 때 필요하다.

로더에 비해서 플러그인은 설정이 간단하다. 플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가하면 된다.

정리

웹팩은 모듈을 번들링 해주는 도구이다.
빠른 로딩속도와 높은 성능을 가졌기에 웹팩 적용은 필요하다.
핵심요소의 흐름은 이렇게 정리할 수 있다.
1. 먼저 앤트리로부터 의존적인 모듈을 전부 찾아낸다.
1. 로더를 통해 각 모듈을 읽을 수 있게 해석한다.
2. 이 모듈들을 병합하고 압축하여 아웃풋에 번들된 결과물을 생성하는 역할을 한다.
3. 생성된 결과물에 추가적인 작업이 필요하다면 플러그인을 통해 처리한다.