웹팩

임정우·2023년 10월 15일

크롬익스텐션 개발기

목록 보기

2/4

웹팩이란

웹팩(Webpack)은 JavaScript 애플리케이션을 위한 모듈 번들러(module bundler) 이다.

모듈 번들러?
여러 모듈로 나누어진 프로젝트의 소스 코드를 하나의 파일로 번들링하여 브라우저에서 로드할 수 있는 형태로 변환하는 도구다. 웹팩은 웹 개발에서 모듈화와 번들링 작업을 효율적으로 수행할 수 있도록 도와준다.

웹팩의 주요 특징과 역할은 다음과 같다

모듈 번들링: 웹팩은 프로젝트에서 사용되는 JavaScript, CSS, 이미지 등 모든 종류의 리소스 및 모듈을 하나의 번들 파일로 묶어준다. 이로써 여러 파일을 하나로 합쳐서 브라우저에서 효율적으로 로드할 수 있다.
로더(Loaders): 웹팩은 다양한 파일 형식과 프로그래밍 언어를 이해하고 처리할 수 있도록 로더를 제공한다. 예를 들어, JavaScript 파일 외에도 CSS, 이미지, JSON 파일과 같은 다양한 파일을 로드하고 처리할 수 있다.
플러그인(Plugins): 웹팩은 다양한 작업을 수행하기 위한 플러그인 시스템을 제공한다. 플러그인을 사용하여 번들링된 파일의 최적화, 환경 변수 설정, 코드 스플리팅, 자동 빌드 등 다양한 작업을 수행할 수 있다.
개발 서버: 개발 중에는 개발 서버를 사용하여 빠르게 코드 변경 사항을 확인할 수 있도록 도와준다. 변경 내용이 자동으로 감지되고 브라우저를 새로고침하지 않고도 업데이트를 볼 수 있다.
모듈 시스템: 웹팩은 ECMAScript 모듈(ES6 이상)과 CommonJS, AMD와 같은 다양한 모듈 시스템을 지원하며, 모듈 간의 의존성을 관리하고 최적화할 수 있다.

웹팩은 주로 현대적인 웹 개발 프로젝트에서 사용되며, React, Angular, Vue.js와 같은 프론트엔드 프레임워크 및 라이브러리와 함께 자주 사용된다. 또한 웹팩은 빌드 프로세스의 일부로 사용되어 코드를 최적화하고 프로덕션 환경에 배포할 준비를 하기 위해 사용된다.

webpack.config.js

webpack.config.js 파일은 웹팩(Webpack) 빌드 도구를 설정하기 위한 구성 파일이다. webpack.config.js 파일은 웹팩이 어떻게 동작하고 웹 애플리케이션을 어떻게 번들링할지에 대한 설정을 담고 있다.

webpack.config.js에는 다음과 같은 설정이 담긴다.
1. 엔트리 포인트 설정, 2. 로더 설정, 3. 플러그인 설정, 4. 출력 설정, 5. 모드 설정, 6. 소스 맵 설정, 7. 분할 설정

파일의 이름을 다르게 할 수도 있다. 그러기 위해서는 웹팩 CLI를 사용할 때 -c 또는 --config 옵션을 사용하여 다른 설정 파일을 지정해야한다.

webpack --config my-custom-config.js

Entry Point

웹팩에서 "엔트리 포인트(Entry Point)"는 웹 애플리케이션의 번들링 프로세스가 시작하는 지점을 가리킨다. 엔트리 포인트는 웹팩이 애플리케이션을 분석하고 종속성을 추적하여 번들을 생성할 때 어디서 시작해야 하는지를 결정한다.

해당 파일에서 다른 모듈 및 종속성을 가져오는 방식으로 애플리케이션 코드가 구성되며, 이 시작점에서부터 모든 종속성을 재귀적으로 추적하고 하나의 번들 파일로 결합한다.

module.exports = {
  entry: { // 엔트리 포인트를 지정
    app: './src/index.js', // 메인 애플리케이션 엔트리 포인트
    admin: './src/admin.js', // 관리자 패널 엔트리 포인트
    dashboard: './src/dashboard.js', // 대시보드 엔트리 포인트
  },
  // 다른 웹팩 설정 옵션들...
};

위의 코드에서 './src/index.js'는 엔트리 포인트의 경로를 지정한다. 이 파일은 웹팩 번들링 프로세스의 시작점이며, 이 파일에서 시작하여 모든 종속성이 추적된다.

Loader

웹팩에서 "로더(Loader)"는 모듈 번들링 프로세스 중에 다양한 파일 형식을 처리하고 변환하는데 사용되는 도구다. 로더를 통해 다른 유형의 파일(CSS, 이미지, HTML, JSON)을 처리할 수 있다. 각 로더는 특정 파일 형식을 가져와 웹팩이 이해할 수 있는 형식으로 변환하거나 다양한 작업을 수행한다.

로더는 웹팩 설정 파일에서 module.rules 속성을 사용하여 정의된다.

각 로더는 다음과 같은 속성을 갖는다. (exclude나 type처럼 다른 속성들도 있지만 공통적으로 갖는 것은 이 두가지인 것 같다.)

test: 어떤 파일이 이 로더에 적용될지를 결정하는 정규표현식이나 파일 확장자 패턴이다.
use: 로더의 이름이나 경로를 나타내며, 로더를 적용하는데 사용된다. 로더를 배열로 지정하여 여러 로더를 연이어 적용할 수 있다.

사용 예시

{
      test: /\.(jpe?g|png|gif|svg)$/i,
      type: "assets/resource",
      use: "assets/resource",
 },

test:
정규 표현식을 사용하여 어떤 파일이 이 로더에 적용될지를 결정한다. test 속성의 값은 파일 이름이 이 정규 표현식과 일치하는 경우에 해당 로더가 실행된다. 위의 설정에서는 JPEG, PNG, GIF 및 SVG 파일에 대한 정규 표현식이 사용되고 있다.

type: "assets/resource":
로더가 어떻게 처리할 것인지를 지정한다. "assets/resource" 타입을 사용하면 해당 파일을 번들에서 외부 리소스로 추출하고, 해당 리소스에 대한 URL 경로를 생성한다. 이는 이미지 파일을 번들에 넣지 않고, 웹 애플리케이션에서 해당 이미지 파일에 대한 경로를 사용할 수 있도록 한다.

use: "assets/resource": 이 옵션은 실제로 사용할 로더를 지정한다. "assets/resource" 로더를 사용하면 이미지 파일을 처리하고 번들에서 외부 리소스로 추출한다.

use: 로더의 이름이나 경로를 나타내며, 로더를 적용하는데 사용된다. 로더를 배열로 지정하여 여러 로더를 연이어 적용할 수 있다.

assets/resource는 번들링된 자원을 다루기 위한 미리 정의된 모듈 중 하나이다.
assets/resource 로더는 번들에 포함된 자원(이미지, 폰트, 기타 파일 등)을 외부 파일로 추출하고 해당 파일에 대한 URL을 생성한다.
참고

플러그인

웹팩의 플러그인(Plugins)은 웹팩 빌드 프로세스를 확장하고 사용자 정의 기능을 추가하는 도구다. 로더(Loader)가 모듈 번들링 중에 파일 변환을 처리하는 반면, 플러그인은 번들된 결과물에 대한 추가 작업을 수행한다. 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 보면 된다

임정우

경희대학교 소프트웨어융합학과

이전 포스트

크롬 익스텐션

다음 포스트

웹팩