Webpack 설치 방법과 기본 사용 방법

웹팩은 오픈 소스 자바스크립트 모듈 번들러로, 자바스크립트 애플리케이션을 구축하는 방식을 현저히 변화시켰다. 웹팩이 정확히 어떤 일을 하는지 살펴보겠다.

1. 모듈 번들링 웹팩은 애플리케이션을 처리하고 내부적으로 의존성 그래프를 작성하여 프로젝트에서 필요한 각 모듈을 매핑하고 하나 이상의 번들을 생성한다. 이것이 웹팩의 가장 중요한 기능이다. 이를 통해 스크립트에서 require()와 import 문을 사용하여 다른 자바스크립트 파일 또는 JSON, CSS와 같은 다른 유형의 파일을 통합할 수 있다.
2. 로더 웹팩 자체는 자바스크립트만 이해할 수 있지만, 로더를 사용하여 모든 유형의 파일을 변환하고 번들링할 수 있다. 예를 들어 Babel 로더를 사용하면 아직 모든 브라우저에서 지원되지 않는 최신 자바스크립트 기능을 사용할 수 있다. CSS와 스타일 로더를 사용하면 자바스크립트 파일에서 CSS를 가져와 런타임에 DOM에 주입할 수 있다.
3. 플러그인 웹팩은 강력한 플러그인 시스템을 제공하여 모든 CSS를 별도의 파일로 추출하고 (JavaScript를 사용하여 DOM에 주입하는 대신) 프로덕션용 번들의 출력을 최소화하는 등 다양한 작업을 수행할 수 있다.
4. 개발 서버 웹팩 개발 서버는 번들을 제공하는 익스프레스 서버이다. 파일이 변경될 때 브라우저에서 번들이 자동으로 업데이트되는 핫 모듈 교체와 같은 기능도 제공한다.
5. 트리 쉐이킹 이것은 번들에서 사용되지 않는 내보내기를 제거하여 코드를 최적화하는 방법이다. 이를 통해 번들의 크기와 애플리케이션의 로딩 시간을 크게 줄일 수 있다.

기본 설치 방법

웹팩은 npm(Node Package Manager)을 통해 쉽게 설치할 수 있다. 먼저 Node.js와 npm이 설치되어 있는지 확인해보자.

// 설치 명령어
npm install --save-dev webpack

웹팩의 기본 사용법

웹팩은 주로 두 가지 핵심 구성 요소인 엔트리(Entry)와 출력(Output)을 통해 작동한다.

엔트리 포인트

엔트리 포인트는 웹팩에게 번들링을 시작할 위치를 알려주고 종속성 그래프를 따라가며 어떤 모듈을 번들할지 결정한다.

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js'
};

출력

출력 속성은 웹팩에게 번들을 생성한 후 어디에 출력할지와 이 파일들을 어떻게 이름짓는지 지시한다.

// webpack.config.js
const path = require('path');

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

프로젝트에서 웹팩을 사용하느냐 아니냐의 차이는 프로젝트의 복잡성에 따라 다르다. 단순한 프로젝트의 경우 웹팩과 같은 도구를 사용하는 것은 지나칠 수 있다. HTML 파일에서 스크립트 태그를 포함시키고 종속성을 수동으로 관리할 수 있다. 그러나 애플리케이션이 커지고 다양한 종속성을 가진 스크립트가 생기면 이는 관리하기 힘들어진다.

웹팩이나 비슷한 도구를 사용하지 않으면 종속성과 로드 순서를 수동으로 관리해야 하므로 번거롭고 실수하기 쉽다. 현대적인 자바스크립트, CSS 전처리기 및 기타 편의 기능을 사용하기 위해 로더의 이점을 활용할 수 없다. 또한 코드 압축과 트리 쉐이킹과 같은 최적화 기능을 사용할 수 없어 브라우저에서 스크립트의 로드 및 구문 분석 시간을 크게 줄일 수 없다.

따라서 많은 종속성이 있는 대규모 프로젝트의 경우 웹팩과 같은 모듈 번들러를 사용하면 많은 시간과 노력을 절약할 수 있으며 더욱 최적화되고 관리 가능한 코드베이스를 구축할 수 있다.

자주 묻는 질문

1. 웹팩은 어떤 용도로 사용되나요? 웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 종속성을 가진 모듈을 나타내는 정적 에셋을 생성한다.
2. 로더와 플러그인은 웹팩에서 무엇을 의미하나요? 로더와 플러그인은 개발자가 번들링 프로세스에 추가 기능을 추가할 수 있는 도구이다.
3. 웹팩이 인기 있는 이유는 무엇인가? 웹팩은 그 유연성과 확장성으로 인기를 얻고 있으며, 기본적으로 다양한 기능과 추가 플러그인을 제공한다.
4. 웹팩은 자바스크립트만을 위한 도구인가? 주로 자바스크립트에 사용되지만, 포함된 로더에 따라 HTML, CSS, 이미지 등의 프론트엔드 에셋을 변환할 수 있다.
5. 웹팩과 Gulp와 같은 태스크 러너의 차이점은 무엇인가? 비슷한 작업을 수행할 수 있지만, 웹팩은 응용 프로그램의 종속성 그래프를 구성하는 모듈 번들러이고, Gulp는 에셋을 변환하고 이동하는 작업을 직접 제어하는 태스크 러너이다.