Bundle

서로 참조관계가 있는 모듈을 모아서 하나의 파일로 묶는 것을 Bundle 이라고 한다.

Webpack 은 이렇게 모듈을 모아서 번들링 해주는 역할을 해준다 하여 'Module Bundler' 라고 불린다.

Bundle

2개의 js 파일을 bundle.js 라는 하나의 파일로 만들어서 사용

👉 모듈들의 의존성을 안전하게 유지시키면서 하나의 파일로 만드는 과정

const path = require('path');

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

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <script src="dist/bundle.js"></script>
    </body>
</html>

Bundle 이 중요한 이유

모든 모듈을 로드하기 위해 검색하는 시간이 단축된다.
사용하지 않는 코드를 제거해준다. (참조하는 코드로만 구성)
파일의 크기를 줄여준다.

Webpack 기본 구조

Webpack이 바라보는 Module: js, sass, hbs, jpg, png ...

모듈들의 의존관계를 해석한 후에 의존성 그래프를 만들어 모듈을 해석하고 번들링 하는 과정을 진행한다.

파일별로 쪼개진 모듈들의 내용을 bundle 파일 내에 모두 담는 과정을 의미한다.

이 때 참조관계에서 가장 상위에 있는 모듈의 위치를 entry 로 작성해준다. (시작점)

웹팩에서 entry 를 시작점으로 다른 모듈들과의 의존관계를 해석하여 bundle 파일을 만드는 것이다.

* hbs ?

Handbars, template engine 으로 데이터를 특정한 양식에 따라 출력해주는 기술

서버사이드 개발 시 서버에서 갖고 있는 데이터를 문서에 바로 출력해주는 역할

의존성

index.js 는 bar.js 에 의존성을 갖는다. (index.js ← bar.js)

index.js

import bar form './bar';

bar();

bar.js

export default function bar() {
	//
}

Entry

모듈의 의존관계를 이해하기 위하 시작점을 설정

참조 관계에서 가장 상위에 있는 모듈의 위치를 entry 로 작성해준다.

웹팩에서 entry 를 시작점으로 다른 모듈들과의 의존관계를 해석하여 bundle 파일을 만드는 것이다.

Output

Webpack 이 생성하는 번들 파일에 대한 정보를 설정

번들 파일이 생성되는 위치나 이름 등의 정보를 설정한다.

예제

명령어(cli)를 통해 웹팩 실행하기

이전의 도형의 넓이를 구하는 코드를 이어서 작성한다.

먼저, package.json 을 생성한다.

package.json 파일은 작업하는 프로젝트에 대한 정보를 나타내며, 프로젝트가 사용하는 패키지들을 관리해준다.

npm init -y

// package.json
{
  "name": "module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

우리가 만든 폴더의 이름이 "name" 이라는 프로퍼티에 기록된 것을 볼 수 있다.

"name" 의 기본값은 프로젝트 폴더의 이름으로 생성된다.

외부 패키지들을 설치하게 되면 어떤 패키지들을 프로젝트에서 사용하고 있는지 파일에 기록하게 된다.

Webpack 설치

npm install webpack webpack-cli --save-dev

*webpack-cli: 웹팩을 실행할 수 있는 명령어를 지원해주는 패키지

이전에 만들었던 코드를 보면 index.js 에서 mathUtil.js 와 log.js 모듈을 사용하고 있다.

즉, index.js 는 두 개의 파일과 의존관계가 있다고 할 수 있다.

웹팩을 통해 번들링하게 되면 3개의 파일이 번들 파일로 담기게 된다.

명령어 npx

설치된 패키지 기준으로 node_modules 안에서 실행파일을 찾아 실행하게 해주는 역할

node_modules/.bin 폴더에 보면 패키지를 실행시켜주는 모듈들을 확인할 수 있다.

직접 경로에 접근하여 실행시킬 수 있지만, npx 명령어를 통해 더욱 쉽게 이용할 수 있다.

❌ 이 때 npx webpack 으로 터미널에 실행하면 에러가 난다.

entry 와 output 에 관한 정보가 누락되었기 때문이다.

Webpack 이 4버전으로 올라가면서 ZeroConfiguration 이라는 설정을 업데이트 했다. 설정에 대한 정보를 입력하지 않아도 여러가지 설정을 한다. 웹팩 명령어만 실행해도 일반적으로 자주 사용되는 웹설정을 적용시켜준다.

ZeroConfiguration 을 이용하기 위해서는 entry 의 경로를 src/index.js 로 준비해주어야 동작한다.

번들 파일이 위치해 있는 장소도 dist 라는 폴더 안에 넣도록 되어있다.

번들 파일의 이름의 경우 main.js 로 결정되어 있다.

즉, entry 와 output 설정을 하지 않아도 번들링 되다는 것을 의미한다.

dist 와 src 폴더 생성
index.js / log.js / mathUtil.js 를 src 폴더로 이동

❌ 다시 npx webpack 을 실행하면 readline 에 대한 오류가 난다.

웹팩이 모듈의 의존관계를 해석할 때 index.js 파일에 있는 readline 이 node_module 에서 제공하는 내장모듈이라고 인식하고 있지 않기 때문에 생긴 에러이다.

해결: 웹팩이 실행되는 환경이 node 라고 인식시켜주면 해결된다.
방법: target 이라는 키를 설정해주어야 한다. 웹팩이 어떤 환경에서 실행되는지 웹팩에게 알려주는 역할.
- cmd 창에서 npx webpack --key이름=값 => npx webpack --target=node
결과: dist 폴더에 main.js 파일이 잘 생성된 것을 볼 수 있다.

위와 같은 설정으로 번들링을 하면 소스코드를 최적화하는 과정이 기본적으로 들어가게 된다.

컴파일 후 생성된 main.js 파일을 보면 알 수 있듯이, 한눈에 알아보기 힘든 형태이다.

번들 파일이 잘 작동하는지 확인 - cmd 창에 node ./dist/main.js

명령어로 웹팩을 실행하는 것도 좋지만, 웹팩 설정파일을 통해 이용하는 방법도 있다.

웹팩 설정파일을 통해 실행하기

webpack.config.js 파일을 생성한다. - 이 파일에서 웹팩에 대한 설정내용을 작성한다.

1. module.exports 를 통해 내보내준다. 웹팩 설정에는 entry 와 output 을 작성해준다.

2. 내보내는 entry 에는 index.js 의 경로를 값으로 할당해준다.

module.exports = {
    entry: './src/index.js',
}

3. output 에는 번들파일의 이름과, 번들파일이 생성되는 파일 경로를 작성해준다.

파일이 생성되는 경로이기 때문에 path 정보의 경우 '절대경로'로 설정해주어야 한다.
node 환경에서 제공되는 __dirname 이라는 변수를 이용해 파일 경로를 만든다. 이 변수를 사용하고 있는 파일의 절대경로를 담고 있다.
node 환경에서 제공되는 path module 은 내장 모듈이다.

⭐ __dirname 과 path module 사용법

const path = require('path');

console.log(__dirname);

const pathTest = path.resolve(__dirname, 'abc');
console.log(pathTest);

resolve 라는 메서드를 사용하고 있는데, 파라미터마다 문자열값을 넣어두면 \ 를 적용시켜 조합해준다.

node ./pathTest.js 콘솔창 출력 결과

C:\Users\merry\workspace\MODULE
C:\Users\merry\workspace\MODULE\abc

기존의 __dirname 은 폴더의 절대경로를 보여주고 있고, resolve 를 통해 문자열값을 경로에 조합시켜주면 절대경로\'문자열' 의 경로가 추가된 것을 볼 수 있다.

const path = require('path');

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

4. node 환경 인식시키기

명령어로 웹팩을 실행한 cli에서 target 이라는 키를 설정해주었듯이, 웹팩 설정을 이용할때에도 target 키를 추가한 후 node 를 값으로 할당해준다.

const path = require('path');

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

5. 웹팩 실행 npx webpack

dist 폴더에 bundle.js 파일이 잘 생성된 것을 볼 수 있다.

Bundle

Webpack 기본 구조

의존성

Entry

Output

예제

명령어(cli)를 통해 웹팩 실행하기

웹팩 설정파일을 통해 실행하기

티스토리툴바