웹팩(Webpack)이란?

웹팩(Webpack 또는 webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.

등장 배경

1. 파일 단위의 자바스크립트 모듈 관리의 필요성
2. 웹 개발 작업 자동화 도구(Web Task Manager)
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

1. 파일 단위의 자바스크립트 모듈 관리의 필요성

자바스크립트의 변수 유효 범위는 기본적으로 전역 범위를 갖는다. 최대한 넓은 변수 범위를 갖기 때문에 어디에서도 접근하기가 편리하다. 그러나 이러한 장점은 실제 웹 애플리케이션 개발 시 변수를 중복 선언하거나 의도하지 않는 값을 할당하는 등의 문제를 발생시킬 수 있다.

자바스크립트 변수 유효 범위로 인해 발생하는 문제로 파일 단위로 변수를 관리하거나 자바스크립트 모듈화의 필요성이 대두되었다.

예전까지 AMD, Common.js와 같은 라이브러리를 이용하여 이러한 문제를 해결하였으나 Webpack과 같은 모듈 번들러의 등장으로 파일 단위의 자바스크립트 모듈 관리가 가능해지며 자바스크립트 변수 유효 범위로 인해 발생하는 문제를 해결할 수 있게 되었다.

2. 웹 개발 작업 자동화 도구(Web Task Manager)

프론트엔드 업무 개발 시 코드 수정 후 브라우저를 새로고침하여 반영하는 등의 작업을 반복적으로 수행하고, 웹 서비스를 개발 후 웹 서버에 배포할 때 아래의 작업들을 수행해야 한다.

• HTML, CSS, JS 압축
• 이미지 압축
• CSS 전처리기 변환

웹 개발 시 필요한 반복 작업을 줄이기 위해 Grunt와 Gulp와 같은 자동화 도구가 등장했다. Webpack에는 다양한 플러그인이 존재하고, 이런 플러그인을 이용하여 필요한 다양한 작업을 자동화할 수 있다.

Grunt

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, comilation, unit testing, and linting.

Grunt는 축소, 컴파일, 단위 테스트 및 린팅과 같은 빈번한 작업을 자동으로 수행하는 데 사용되는 도구인 JavaScript 작업 실행기이다.
(예, Java의 Maven, Gradle과 같은 프로젝트 빌드 도구)

Gulp

Gulp is an open-source JavaScript toolkit created by Eric Schoffstall used as a streaming build system in front-end web development.

Gulp는 프론트엔드 웹 개발에서 스트리밍 빌드 시스템으로 사용되는 Eric Schoffstall이 만든 오픈 소스 자바스크립트 툴킷이다.

• grunt vs gulp vs webpack

3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

HTTP/2에서는 하나의 커넥션에 동시에 여러 파일을 요청할수 있지만, 우리가 주로 사용하는 HTTP/1.1의 경우, 하나의 커넥션에서 하나의 요청을 보내야 한다.

예를 들어, 하나의 웹 사이트에서 사용하는 자바스크립트 파일이 10개라면 로드될 때마다 10개를 모두 네트워크 요청을 통해 받아와야 하며, 프로젝트 규모가 커질수록 병목 현상을 야기시키는 요소 중 하나이다.

이러한 문제 해결을 위해 앞서 설명한 바와 같이 웹 태스트 매니저를 이용해 파일들을 압축하고 병합하는 작업을 진행하고, 초기 페이지 로딩 속도를 높이기 위해 Code Splitting(코드 분할)을 이용하여 나중에 필요한 자원들을 나중에 요청(Lazy Loading)한다.

Webpack 또는 Browserify와 같은 모듈 번들러에서 제공하는 Code Splitting을 이용하여 런타임에 동적으로 로딩하는 여러 번들을 만들 수 있다.

Code Splitting은 번들한 여러 코드 혹은 컴포넌트를 분리하는 것으로 필요에 따라 특정 컴포넌트만 로딩하거나, 병렬로 로딩할 수 있다. 그렇게하여 화면 로딩 시 필요한 기능은 바로 다운로드하고, 추가 스크립트는 화면이나 애플리케이션 상호 작용시 지연 로딩하여 기능을 향상시킬 수 있다.

HTTP/2 vs HTTP/1.1

• HTTP 1.1 vs HTTP 2.0 (한글 정리 블로그)
• http 1.0 and http 2.0 - What is new?
• What is the Difference between HTTP 1.2 and HTTP 2.0 versions? why should I care?
• HTTP 2.0 or HTTP 1.0
• HTTP/1.1 vs HTTP/2

주요 속성

Webpack의 빌드(파일 변화) 과정을 이해하기 위해 Webpack 설정 파일(webpack.config.js)에서 설정 가능한 4가지 주요 속성에 대해 이해해야 한다.

1. Entry

entry 속성은 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로이다.

entry 속성에 지정된 파일을 통해 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다.

• SPA (Single Page Application) 예시
  : LoginView, HomeView, PostView 등 웹 서비스에 필요한 화면들이 모두 index.js 파일에서 불려져 사용되고, index.js을 대상으로 웹팩이 빌드를 수행한다.

// index.js
import LoginView from './LoginVuew.js'
import HomeView from './HomeView.js'
import PostView from './PostView.js'

function initApp() {
  	LoginView.init();
  	HomeView.init();
  	PostView.init();
}

initApp();

// webpack.config.js
module.export = {
  entry: './src/index.js'
}

• MPA (Multi Page Application) 예시

// webpack.config.js
module.export = {
  login: './src/LoginView.js',
  main: './src/MainView.js'
}

2. Output

output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다.

최소한 filename(웹팩으로 빌드한 파일의 이름)은 지정해줘야 하며 일반적으로 아래와 같이 path 속성(파일 경로)을 함께 정의한다.

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

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}

3. Loader

로더(loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, Font 등)들을 변환할 수 있도록 도와주는 속성이다.

entry나 output 속성과 달리 module이라는 이름을 사용한다.

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}

다양한 종류의 Loader가 있으며, rules 배열에 여러 개의 옵션을 추가하여 사용할 수 있다.

Loader의 종류
CSS Loader / Babel Loader / File Loader / Vue Loader / TS Loader

test는 로더를 적용할 파일 유형으로 일반적으로 정규 표현식을 사용한다. use는 해당 파일에 적용할 로더의 이름으로 아래의 예제는 모든 CSS 파일에 대해서 CSS 로더를 적용하고, 모든 TS 파일에 대해서 TS 로더를 적용하겠다는 의미이다.

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      // ...
    ]
  }
}

4. Plugin

플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다. 로더와 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다.

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ]
}

모듈 번들러(Module Bundler)란?

프로그래밍 관점에서 모듈이란 특정 기능을 갖는 작은 소스 단위를 의미하지만 모듈 번들러(Module Bundler)는 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Image 등)을 모두 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물로 만드는 도구를 의미한다.
대표적인 모듈 번들러는 RequireJS, Browerify, Rollup, Parcel 등이 있으며, 앞서 설명한 Webpack 또한 모듈 번들러의 한 종류이다.

사용 이유

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
2. 모듈 단위로 개발이 가능하여 가독성과 유지보수가 쉽다.
3. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환할 수 있다.