[TIL] 번들링과 웹팩

송인선·2022년 9월 26일

TIL

목록 보기

13/16

Today I Learn...

이번 유닛에서는 번들링과 웹팩에 대해서 배우게된다.

프론트엔드에서의 번들링 => 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정

차근차근 공부해보자!! 📖🤓

번들링

💡 번들링이란? :
여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위

그렇다면, 프론트엔드 개발자에게 번들링이란? :
사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음

➡️ 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받음. 이 파일을 브라우저가 실행하여 웹 애플리케이션을 사용자에게 제공!

그런데 꼭 번들링이 필요할까? 안하면 안될까?

❗️ 번들링 작업에서는 필연적으로 용량을 줄이고 파일을 통일하는 툴링 작업이 필요하다. 즉, 소프트웨어를 잘 만들어도 사용자에게 배포하기 위해 번들링이 꼭 필요한 것!

웹팩 (Webpack)

Webpack: 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
모듈 번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구

📌 Webpack이란

모듈 번들러(Module Bundler)의 등장

모던 웹으로 발전하면서

1️⃣ JavaScript 코드의 양이 절대적으로 많이 증가
2️⃣ 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장
➡️ 세분화된 모듈 파일이 폭발적으로 증가

이러한 문제점에 대응하기 위해 하나의 시작점으로부터 의존성을 가지는 모듈을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장하게 되었다.
(하나의 시작점 예시: React App의 index.js 등)
Webpack에서의 모듈

Webpack에서의 모듈은 JavaScript, HTML, CSS, 혹은 .jpg나 .png 같은 이미지 파일들도 전부 포함한 포괄적인 개념

➡️ Webpack은 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링이 가능 😆
빌드와 번들링

빌드: 개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업
(예시: React 앱을 기준으로 설명하면, npm run build를 실행하면 React build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공해 준다)

번들링: 파일을 묶는 작업 그 자체를 말하며, 파일은 의존적 관계에 있는 파일들(import, export) 그 자체 혹은 내부적으로 포함 되어 있는 모듈을 의미한다.
➡️ 즉, 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업

📌 Webpack의 필요성

웹페이지를 구성하는 코드의 양이 많은 것을 “무겁다”라고 표현
➡️ 무거우면 무거울수록 웹 페이지의 로딩 속도와 성능은 저하⬇️⬇️가 된다.

1️⃣ Webpack이 있다면 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로! 줄어들게 된다.

2️⃣ Webpack loader를 사용하면 ?
일부 브라우저에서 지원하지 않는 babel-loader(JavaScript ES6의 문법들을 ES5로 변환)를 사용할 수 있다.
Vue인 경우는 vue-loader를, scss 파일 같은 경우는 css 파일로 변환해주는 scss-loader 등의 loader도 사용 가능

3️⃣ Develoment, Production 모드 (Webpack4 버전 이상)
Production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원

➡️ 프로그램을 사용자가 느끼기에 더욱 쾌적한 환경 및 보안까지 신경쓰는 점에서 Webpack의 필요성은 굉장히 높은 편 ☺️👍

웹팩의 핵심 컨셉

📌 Target

Webpack은 다양한 환경과 target을 컴파일한다. target의 기본값은 web

module.exports = {
  target: ["web", "es5"],
};

// 브라우저와 동일한 환경에서 사용하기 위하여 컴파일할 것이며, 
// 작성된 코드를 es5 버전으로 컴파일 하겠다고 지정한 것

📌 Entry(엔트리)

프론트엔드 개발자가 작성한 코드의 시작점으로 이해하면 OK
Entry point라고도 하며, webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈이다. Webpack은 이 Entry point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.

//기본 값
module.exports = {
	...
  entry: "./src/index.js",
};

//지정 값
module.exports = {
	...
  entry: "./src/script.js",
};

// 기본 값은 ./src/index.js
// webpack 설정에서 Entry 속성을 설정하여 지정 가능 (여러개도 OK)
// 여러개를 지정할 때는 배열에 넣어주면 된다.

📌 Output(출력)

생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할

const path = require('path');

module.exports = {
	...
  output: {
    path: path.resolve(__dirname, "docs"), // 절대 경로로 설정을 해야 합니다. 
    filename: "app.bundle.js",
    clean: true
  },
};

// 기본 출력 파일의 경우에는 ./dist/main.js
// 기타 파일의 경우에는 ./dist 폴더로 설정
// output.filename과 output.path 속성을 사용하여 webpack에 번들의 이름과 내보낼 위치를 알려주고 있다.
// path 속성을 사용할 때는 path 모듈을 사용해야만 함

📌 Loader(로더)

Webpack이 기본적으로 이해하는 JavaScript와 JSON 파일 외에, loader를 사용하면 Webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환해 애플리케이션에 사용 또는 디펜던시 그래프에 추가할 수 있다.

로더의 속성

test: 변환이 필요한 파일들을 식별하기 위한 속성
use: 변환을 수행하는데 사용되는 로더를 가리키는 속성
exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정
(반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)

test와 use 속성은 필수 속성이다.
이런 속성을 넣어 규칙을 정하기 위해서는 module.rules 아래에 정의해야 함.
(그냥 rules 아래에 정의하면 webpack은 경고한다.)

module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
};

📌 Plugins(플러그인)

Plugins를 사용하면 번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행할 수 있다.

플러그인 사용 방법
1️⃣ require()를 통해 플러그인을 요청
2️⃣ plugins 배열에 사용하고자 하는 플러그인을 추가
➡️ 대부분의 플러그인은 사용자가 옵션을 통해 지정할 수 있다.
3️⃣ new 연산자를 사용해 호출하여 플러그인의 인스턴스를 만들어주기
➡️ 다른 목적으로 플러그인을 여러 번 사용하도록 설정할 수 있다.

const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
};

// html-webpack-plugin은 생성된 모든 번들을 자동으로 삽입
// => 애플리케이션용 HTML 파일을 생성
// mini-css-extract-plugin은 CSS를 별도의 파일로 추출
// => CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원

📌 Optimization(최적화)

Webpack 버전 4부터 선택한 항목에 따라 최적화를 실행한다.

minimize : TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정
minimizer : defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있다.

module.exports = {
  ...
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

// mini-css-extract-plugin에 관련된 번들을 최소화하도록 지시