[Webpack] 웹팩(Webpack) 이란?

최지수·2024년 3월 17일

📘Webpack이란?

Webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러(static module bundler)이다. 웹 개발에서 사용되는 리소스들(JavaScript, CSS, HTML 파일 및 이미지 등)을 모듈 단위로 관리하고 이를 하나 또는 여러 개의 파일로 묶어서 최적화하는 도구이다.

Wepback은 애플리케이션을 처리할 때, 내부적으로 의존성 그래프를 생성한다. 이 그래프는 애플리케이션의 모듈을 추적하는데 사용되며, 시작점은 보통 JavaScript 파일 하나이다. Webpack은 이 시작점에서부터 필요한 모든 모듈을 찾아나가며, 각 모듈을 적절하게 변환하는 로더(loader)들을 사용한다. 최종적으로 Webpack은 모든 모듈을 포함하는 하나 또는 여러 개의 번들(bundle)을 생성한다.

📚Webpack 핵심 기능

1. Entry

Entry는 Webpack이 내부의 의존성 그래프를 생성하기 위해 사용해야 하는 모듈이다. Webpack은 Entry가 의존하는 다른 모듈과 라이브러리를 찾아낸다. 또한 Entry는 Webpack이 애플리케이션을 빌드하기 시작하는 지점이다.

기본값은 ./src/index.js이지만, Webpack 설정에서 Entry 속성을 설정하여 다른 또는 여러 Entry 포인트를 지정할 수 있다.

다음과 같이 예를 들어볼 수 있다.

// webpack.config.js

modul.exports = {
  entry: './path/to/my/entry/file.js',
};

2. Output

Output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 Webpack에 알려주는 역할을 한다. 즉, Wepback이 생성하는 번들의 위치와 이름을 정의한다. 기본 출력 파일의 경우에는 ./dist/main.js로, 생성된 기타 파일의 경우에는 ./dist 폴더로 설정된다.

다음과 같이 설정에서 Output 필드를 지정할 수 있다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__direname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

output.filename과 output.path 속성을 사용하여 Webpack에 번들의 이름과 내보낼 위치를 알려주었다. 상단에서 가져오는 path 모듈은 파일 경로를 지정하기 위해 사용되는 core Node.js 모듈이다.

3. Loaders

Webpac은 기본적으로 JavaScript와 JSON 파일만 이해한다. Loader를 사용하면 Webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 의존성 그래프에 추가한다. 즉, Webpack이 JavaScript 이외의 파일들을 이해하고 사용할 수 있게 해준다. 예를 들어, CSS, 이미지, TypeScript 등의 파일을 JavaScript 코드로 변환하여 애플리케이션에 포함시킬 수 있다.

상위 수준에서 Loader는 Webpack 설정에 두 가지 속성을 가지낟.
1. 변환이 필요한 파일들을 식별하는 test 속성
2. 변환을 수행하는데 사용되는 Loader를 가리키는 use 속성

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test /\.txt$/, use: 'raw-loader' }],
  },
};

위 설정에서는 test와 use라는 두 가지 필수 속성을 가진 하나의 모듈을 위해 rules 속성을 정의했다.

Loader 특징

첫 번째 Loader는 결과(변환이 적용된 리소스)를 다음 Loader로 전달하며, 전달은 다음 Loader로 계속된다.
Loader는 동기식 또는 비동기식일 수 있다.
Loader는 Node.js에서 실행되며 Node.js에서 가능한 모든 작업을 수행 할 수 있다.
Loader는 options 객체로 구성할 수 있다. (여전히 query 파라미터를 사용하여 옵션을 설정할 수 있지만 권장하지 않음)
일반 모듈은 loader 필드가 있는 package.json을 통해 main 및 Loader를 내보낼 수 있다.
Loader는 추가로 임의의 파일을 생성할 수 있다.

3. Plugins

Loader는 특정 유형의 모듈을 변환하는 데 사용되지만, Plugin을 활용하여 번들을 최적화하거나, asset을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있다. Plugin은 Webpack의 빌드 프로세스에 훅(hook)하여 다양한 시점에 사용자 정의 동작을 실행할 수 있다.

Plugin을 사용하려면 require ()를 통해 Plugin을 요청하고 plugins 배열에 추가해야 한다. 대부분의 Plugin은 옵션을 통해 사용자가 지정할 수 있다. 다른 목적으로 Plugin을 여러 번 사용하도록 설정할 수 있으므로 new 연산자로 호출하여 Plugin의 인스턴스를 만들어야 한다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

위의 예제에서 html-webpack-plugin은 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성한다.

📘Webpack을 사용하는 이유

Webpack을 사용하는 이유는 현대 웹 개발의 복잡성과 요구 사항이 증가했기 때문이다. 웹 애플리케이션은 점점 더 많은 JavaScript, CSS, 이미지 파일 등을 사용하게 되었고, 이러한 자원들을 효율적으로 관리하고 최적화하는 것이 중요해졌다. Webpack은 이러한 현대 웹 개발의 도전과제를 해결하기 위해 다음과 같은 이유로 필요하다.

1. 모듈화와 의존성 관리

대규모 웹 애플리케이션은 수백 개의 파일로 구성될 수 있으며, 이러한 파일들 사이의 의존성을 관리하는 것은 매우 복잡할 수 있다. Webpack은 모듈화를 통해 이러한 의존성을 쉽게 관리하고, 코드의 재사용성과 유지보수성을 향상시킨다.

2. 성능 최적화

Webpack은 여러 개의 파일을 하나 또는 소수의 번들로 합치고, 불필요한 코드를 제거하는 tree shaking과 같은 기법을 사용하여 최종적인 파일 크기를 줄일 수 있다. 이를 통해 네트워크 요청의 수를 줄이고, 애플리케이션의 로딩 시간을 개선할 수 있다.

tree shaking이란 웹 애플리케이션에서 사용되지 않는 코드를 제거하는 프로세스를 말한다.
이는 최종 번들의 크기를 줄이고 애플리케이션의 성능을 최적화하는 데 도움이 된다.

3. 개발 환경 개선

Webpack은 HMR와 같은 기능을 제공하여 개발자가 코드를 수정할 때 페이지를 새로고침하지 않고도 변경 사항을 즉시 불 수 있게 해준다. 이는 개발자 경험을 크게 향상시키며, 개발 과정을 더욱 효율적으로 만든다.

HMR이란 Hot Module Replacement의 약자로, 웹 애플리케이션 개발 과정에서 코드를 변경했을 때 전체 페이지를 새로고침하지 않고도 해당 변경 사항을 실시간으로 반영되는 기능을 말한다. HMR은 개발자가 더 빠르게 개발하고 테스트할 수 있도록 해주어 개발자 경험을 크게 향상시킨다.

4. 다양한 자원 처리

Webpack은 Loader 시스템을 통해 JavaScript 코드뿐만 아니라 CSS, 이미지, 폰트와 같은 다양한 유형의 파일을 처리할 수 있다. 이를 통해 개발자는 다양한 자원을 하나의 일관된 방식으로 관리할 수 있다.

5. 맞춤화와 확장성

Webpack은 매우 유연하고 확장 가능하다. Plugin과 Loader를 통해 개발자는 빌드 프로세스를 자신의 프로젝트 요구 사항에 맞게 맞춤화할 수 있다. 이를 통해 다양한 개발 환경과 프로젝트 요구 사항을 수용할 수 있다.

참고 자료
https://webpack.kr/concepts/

최지수

오늘보다 내일 더 성장하는 개발자🌱

이전 포스트

[React] React Hook에 대해 알아보기

다음 포스트