[웹] 번들링과 웹팩 정리

번들링은 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다.
프론트엔드 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"이다.
정확히 말하면 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업

❓ 웹팩

여러개의 파일을 하나로 합쳐주는 모듈 번들러이다. HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.
webpack은 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다.

🤔 필요성

웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위함이다. 웹페이지를 구성하는 코드의 양이 많은 것을 “무겁다”라고 표현하는데, 무거울수록 웹 페이지의 로딩 속도와 성능은 저하가 된다. 일반적으로 유저는 하나의 웹사이트에 접근하는 순간부터 3초 이내에 웹페이지가 뜨지 않으면 기다리지 않고 이탈을 선택한다.

---

🧑🏻‍💻 번들링 준비

설치할 명령어 : npm init -y , npm install -D webpack webpack-cli ,
npm i -D css-loader style-loader , npm i -D html-webpack-plugin

• npm으로 패키지를 초기화 & 생성한다 npm init -y -y 는 yes 뜻으로 따로 변경없이 바로 생성하는 내용

• 패키지 생성후 npm install -D webpack webpack-cli 명령어를 입력하여 웹팩 모듈을 설치한다.

• 웹팩을 npm run build 명령을 통해 실행 하기위해 package.json 파일을 열어 수정 해준다.

{
  "name": ...
  "main": ...,
  "scripts": {
    "build": "webpack", // <- 이부분추가.
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ・
  ・
  ・
  "devDependencies": {
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

다음으로 웹팩 설정을 위해 webpack.config.js 파일을 생성하고 사용한다.

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  })]
};

키워드를 알아두자

Enrty

엔트리는 시작점인 enrty point 로 번들을 시작할 파일을 설정한다.

Output

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

Loader

웹팩에서 rules 규칙을 정한다. 변환이 필요한 파일을 식별(test) , 수행하는 (use) 역할을한다.

"이봐 webpack 컴파일러, require ()/import 문 내에서 '.css’ 파일로 확인되는 경로를 발견하면 번들에 추가하기 전에 style-loader, css-loader를 사용하여 변환해."

Plugins

플러그인을 활용하여 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행한다.

🔎 번들링 동작방식

npm run build 명령어로 번들링을 한다. 웹팩이 weppack.config.js 파일코드를 읽고 (output : ..)
dist 폴더, app.bundle.js 파일을 생성한다.

저 app.bundle.js 파일이 번들링한 파일이다.
파일을 열면

이렇게 코드가 한줄로 나열 되어있는데, vscode 포멧 기능을 이용하도록한다.
Mac은 option + shift + f , window 는 ctrl + shift + f
창이 뜨고 구성 버튼을 누르면 기본적으로 돌아간다.