Webpack - Bundle | 웹팩 번들링

그동안 CRA나 VITE에서 자동으로 생성해주는 웹팩에 대해서 뭐 그렇게..? 제대로 살펴보지 않았던거 같은데..기록을 좀 해두고자 함..

 

1. 웹팩

2. 웹팩이란?

https://webpack.js.org

번들(Bundle), 그러니까 이게 무슨 뜻인지 부터 살펴봤는데...말 그대로 묶음..꾸러미 (위 사진처럼) 이다.

 

공식 사이트에서 제공하는 이미지를 참고하면 의존성 모듈이나 정적 리소스를 하나의 JS 파일로 묶어주는건데, 기본적으로 자바스크립트 모듈 시스템을 사용하면 여러 파일이 생성되고 이것을 유기적으로 연결해 하나의 서비스를 구성하다 보면, 한데 묶어서 하나의 파일로 요청을 최소화 하는게 좋다고 이해하고 있으며 그러한 사유로..이러한 번들링 도구가 탄생한게 아닐까 싶다.

 

 

공식사이트에 설명이 잘 나와있지만,..직접 해봐야 알겠지!

3. 웹팩 사용법

일단, 기본적인 웹팩 사용을 위해 샘플 프로젝트용 폴더를 로컬에 어디라도 생성해둔다 (ex. webpack_test)

 

그런다음, 소스 폴더를 생성한다. (보통 src 라는 폴더를 만드니까, 나도 그렇게 따라했음) 그리고, 간단한 index.js 파일을 생성해보고 console.log()로 문자열을 하나 출력해본다.

 

순서가 좀 맞지 않지만,..webpack, webpack-cli 모듈을 설치해야 하니까..그러니까 node.js 작업이니까 npm init -y 명령을 터미널에 입력해 nodejs 프로젝트 초기화를 한다..(가급적 제일 먼저 하는게 좋겠지만,..깜박함)

 

그리고 이어서 dist 폴더를 생성하고, 여기에 index.html을 생성한다. 이때 html 문서는 html5 boilerplate를 이용해 webpack이 번들링해서 저장할 bundle.js 파일을 연결하려고 한다.

 

이번에는 웹팩을 사용하기 위해 두가지 모듈을 설치한다 (역시, 터미널에 입력해야죠) 모듈이 설치되고 나면, 로컬에는 node_modules/ 라는 폴더가 생성되고 이 안에 해당 모듈이 위치한다.

 

웹팩을 사용하기 위해서는 기본적으로 webpack.config.js 라는 웹팩 설정파일이 필요한데, 새 파일을 생성하고 다음의 소스를 복붙 해둔다.

// Common JS
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  watch: true,
};

 

만약, ESM 방식으로 사용하려면 package.json에 모듈 타입을 명시해주고 일부 코드를 수정해야한다.

// package.json에 다음 추가
...
"type": "module",
...

 

__dirname을 ES6 모듈에서 사용할 경우 "ReferenceError: __dirname is not defined " 라는 오류 메세지가 있으므로 추가적인 (기본) 모듈인 path, url을 사용해야 한다.

 

import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  watch: true,
};

 

이제, 웹팩 번들링을 위해 package.json 파일에 build 스크립트를 다음과 같이 추가하고, 터미널에 webpack 을 입력해보자

 

start나 stop, install, uninstall 등 몇몇 명령은 그냥 run을 생략하고 npm 명령어 형태로 실행할수 있는걸로 아는데, 아직은..난 npm run 명령어 형태가 편한듯?

 

그럼, 이제 왼쪽 탐색기에 dist/bundle.js 라는 파일이 생성되었음을 확인하자.

 

이번에는 Live Server 라는 Visual Studio Code 확장기능을 추가해서 그 결과를 확인하면, 콘솔 탭에 관련 로그 기록이 정상적으로 출력되었음을 확인하자.

 

그리 사용법이 복잡하지 않았는데, CRA나 VITE를 사용하면 직접 구성할 일이 없어서...까먹을것만 같다.

 

아참, 그리고 webpack은 javascript나 JSON만 인식할 수 있으므로 웹팩이 지원하는 loader를 추가로 기록하고, 관련 모듈을 설치해야한다.

https://webpack.js.org/loaders/

Loaders | webpack

 

---

웹팩 핸드북도 있던데,..일단 참고용으로 기록해본다. 끝!

 

https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#웹팩에서의-모듈