웹팩 모듈 번들러

모듈이란?

개발하는 앱의 크기가 커지면 파일을 여러 개로 분리해야 한다. 이때 분리된 파일 각각을 모듈이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.

모듈은 단지 하나의 파일에 불과하다. 스크립트 하나는 하나의 모듈이다. 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능하다.

번들러란?

번들러는 단순히 자바스크립트 파일들 뿐만 아니라, 앱에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(번들)으로 만들어 낸다. 또한 자바스크립트 파일을 외부에서 알아 보기 힘들게 코드를 변환하는 작업을 한다거나, 최신 문법의 자바스크립트를 모든 웹 브라우저에서 작동할 수 있게 변환하는 등 다양한 기능을 지원한다.

번들러를 사용할 시에
1. 네트워크 병목 현상 해결 - 여러 파일을 최적화해서 하나의 파일로 묶기 때문에 주고 받는 파일의 크기를 줄여준다.
2. 모듈 단위 코딩 - 유지 보수가 편하고, 코드의 가독성을 향상시킨다.
3. 다양한 서드파티 기능 이용 - babel-loader나 sass-loader와 같은 다양한 로더를 이용해서 모던 자바스크립트나 sass를 이용할 수 있다.

웹팩이란?

웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러이다.

웹팩의 주요 네 가지 개념을 정리하면 다음과 같다.

엔트리,아웃풋, 로더, 플러그인

엔트리

웹팩에서 모든 것은 모듈이다. 자바스크립트, 스타일시트, 이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용한다. 위 그림처럼 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리라고 한다.

웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다.

module.exports = {
  entry: {
    main: "./src/main.js",
  },
}

아웃풋

엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶은 결과물을 output에 기록한다.

module.exports = {
  output: {
    filename: "bundle.js",
    path: "./dist",
  },
}

dist폴더의 bundle.js 파일로 결과를 저장

로더

웹팩은 모든 파일을 모듈로 관리한다고 했다. 자바스크립트 파일 뿐만 아니라 이미지, 스타일시트 등 모두 모듈로 관리한다. 하지만 웹팩은 자바스크립트밖에 알지 못한다. 자바스크립트가 아닌 파일을 웹팩이 이해하게 변경해줘야 하는데 이 역할을 로더가 한다.

로더는 test와 use키로 구성된 객체로 설정할 수 있다.
test에 로딩할 파일을 지정하고
use에 적용할 로더를 설정한다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: "node_modules",
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env"],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

babel-loader와 css-loader를 적용한 모습

플러그인

로더가 파일단위로 처리하는 반면 플로그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용할 수 있다.

const webpack = require("webpack")

module.exports = {
  plugins: [new webpack.optimize.UglifyJsPlugin()],
}

UglifyJsPlugin을 적용하여 난독화한 모습