TIL | 웹팩 번들 파일 생성하기

웹팩의 등장

• 웹 애플리케이션의 크기가 커지면서, JS 파일의 크기 또한 커졌다. 때문에 JS코드 또한 나눠서 관리했으나 이는 script의 많은 사용으로 HTTP 병목 현상이 발생하게 된다.

• 위와 같은 계기로 인해 모듈로 나누어 관리하는 방법들이 있으며, 대표적으로 웹팩이 존재한다.

• 웹팩은 다수의 파일(module)을 하나의 파일로 합쳐주는 번들러(bundler). 이때 합쳐진 파일을 번들(bundle)이라고 한다.

---

웹팩 설치

npm init

npm install -D webpack webpack-cli

• npm init을 통해 npm으로 관리할 프로젝트의 json 파일을 생성한다.

• 터미널에서 위와 같은 커맨드를 통해 webpack와 터미널 도구인 webpack-cli을 설치한다.

• -D는, devDependencies에 설치되도록 하는 키워드이다.

---

bundle 파일 생성하기

entry / output / mode

• entry: 모듈의 시작점, 즉 번들링하고자 하는 파일의 경로를 지정해준다.

• output: 엔트리를 하나의 파일로 합쳐 번들로 만든 후 번들이 저장될 경로를 지정힐 수 있다.

• mode: 웹팩의 실행 모드를 뜻한다.

  • mode: development(개발 버전)
  • mode: production(프로덕트 버전, 따로 지정하지 않을시 자동으로 선택된다. => default)

---

webpack.config.js파일 지정하기

// app.js
const path = require("path"); // node에서 path라는 모듈을 불러왔다.
module.exports = {
  mode: "development", // mode 설정
  entry: {
    main: "./src/app.js", // entry 경로 설정
  },
  output: {
    path: path.resolve("./dist"), // 번들링된 파일이 저장될 output 경로 설정
    filename: "[name].js", // []를 통해 번들링 될 파일의 output이름을 동적으로 만들어 낼 수 있다. (엔트리 파일 기준)
  },
};

//package.json
{
  "name": "webpack_tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack" // npm custom 명령어를 지정해준다.
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0"
  }
}

• bundle파일을 커맨드를 통해서만 생성할 경우 비효율적이기 때문에, 위처럼 웹팩 설정 파일을 만들어 관리하도록 한다.

• script에 build 커맨드를 추가하여 node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist 가 아닌, npm run build를 통해 웹팩을 실행할 수 있다.

---

+ Node.js - path

const path = require("path");

• Node.js의 path라는 모듈은 폴더의 경로를 지정하는 내장 모듈이다.
• 인자들을 오른쪽부터 왼쪽으로 합쳐나간다.

path.resolve("/foo/bar", "./baz");
// 실행 결과
// /foo/bar/baz(/로 시작하지 않음,)
//
path.resolve("/foo/bar", "/tmp/file/");
// 실행 결과
// /tmp/file

• path.resolve: 인자로 받은 경로들을 문자로 리턴한다. string형태로 받은 인자들을 합쳐 절대 경로를 지정하며, 경로 인자를 합치면서 /를 만났을 시 절대경로로 인식하여 나머지 경로는 무시한다.

---

Reference

• webpack 공식문서

• 프론트엔드 개발환경의 이해(기본)

• Node.js 공식문서