Webpack

2017-05-20

2024-06-07

bundler, webpack

Webpack 이란?

Webpack은 자바스크립트의 모듈링을 도와주는 모듈 번들러 이다.
모듈 시스템을 구성하는 기능(CommonJS와 AMD 모듈링 방식을 모두 지원) 외에도 여러가지 리소스를 처리할 수 있는 강력한 로더 기능 사용, 기존의 다른 번들러들보다 빠른 컴파일 속도 및 유용한 플러그인 등 장점이 많다.

webpack 사용 방법

webpack은 Node.js가 설치된 환경에서 실행된다. Node.js를 사용하는 환경에서 webpack을 설치하고 모듈을 컴파일하는 방법은 다음과 같다.

설치와 컴파일

webpack은 다음과 같이 npm 명령어로 설치할 수 있다.

// 터미널에서 webpack 명령어를 사용하기 위해 글로벌로 웹팩을 설치
$ npm i -g webpack

// 현재 프로젝트에서 웹팩을 사용하기 위해 설치
$ npm i -D webpack

webpack이 설치되면 다음 예와 같이 webpack {엔트리 파일 경로} {번들 파일 경로} 형식으로 명령어를 실행해 모듈을 컴파일한다.

1	$ webpack ./entry.js bundle.js

엔트리 파일은 다음 그림과 같이 서로 의존 관계에 있는 다양한 모듈을 사용하는 시작점이 되는 파일이다. 번들 파일은 브라우저에서 실행할 수 있게 모듈을 컴파일한 파일이다.
webpack에서 컴파일은 엔트리 파일을 시작으로 의존 관계에 있는 모듈을 엮어서 하나의 번들 파일을 만드는 작업이다. JavaScript를 사용하는 HTML 코드에서는 컴파일 결과로 만들어진 번들 파일만 포함하면 된다.

컴파일 과정

엔트리 파일이 여러 개일 때는 엔트리 파일마다 번들 파일이 생성된다.

엔트리 파일이 여러 개일 때의 컴파일 과정

설정 파일 사용

CLI(command line interface)로 webpack을 실행해 컴파일할 때 엔트리 파일이 많거나 옵션이 많으면 입력하기 불편하다. 설정 파일을 만들어 컴파일하면 이런 불편을 줄일 수 있다.

webpack 설정 파일의 기본 형태는 다음과 같다.

// webpack.config.js
// __dirname은 현재 폴더를 나타낸다.

module.exports = {
    // devtool - 디버깅을 지원한다.
    // 오류가 발생하는 경우, 크롬 개발자 콘솔과 같은 도구를 이용하여 실수한 위치를 확인하는 데 도움된다.
    // source-map과 cheap-eval-source-map의 차이에 대해서는 문서를 읽고도 이해하기가 조금 어려웠지만,
    // 확실히 알 수 있었던 것은 source-map이 제품용 모드에서 오버헤드가 많다는 점과,
    // cheap-eval-source-map이 더 작은 오버헤드를 가지며,
    // 이것은 단지 개발을 위한 것이라는 점이다.
    devtool: 'source-map', // 생략 가능
    
    // 번들의 엔트리 파일 포인트
    entry: {
        app: './app.js' 
    },
    
    // Webpack의 최종 결과물이 되는 형태를 명시
    output: {
        path: __dirname + '/dist', // 번들 파일 폴더
        filename: '[name].bundle.js' // 번들 파일 이름 규칙
    }
};

위와 같은 형태로 webpack.config.js 파일을 작성해 저장한다. 설정 파일이 있는 디렉토리에서 다음과 같이 간단하게 명령어를 입력하면 컴파일을 실행한다.

$ webpack

webpack 명령어를 치면 기본적으로 webpack.config.js 파일을 찾는다. 하지만 보통 프로덕션, 테스팅, 로컬 환경에 따라 다른 파일을 쓰게 되므로 다른 설정파일을 쓰고 싶은 경우 webpack –config 설정파일경로 로 설정한다

1	$ webpack --config {@파일명}.js // 특정한 이름의 사용자가 정의한 Webpack 설정 파일을 사용하는 경우

컴파일 명령어에 --watch 나 -w 옵션을 사용하면 모듈 파일이 변경될 때마다 변경된 모듈을 자동으로 다시 컴파일한다.

1 2	// Webpack에서 파일의 상태가 변경되면 자동으로 빌드 $ webpack --watch \|\| -w

webpack을 사용할 때는 다양한 설정을 함께 사용하는 경우가 대부분이라 설정 파일로 컴파일하는 사례가 많다. 더 다양한 설정 옵션과 자세한 설명은 webpack 문서의 Configruation에서 확인할 수 있다.

FrontendModuleWebpack

Webpack

Webpack 이란?

참조