번들링과 웹 팩 (webpack)

webpack 이란?

Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러 중 하나이다.
* 번들러는 서로 연관(의존성)이 있는 여러 모듈을 하나의 번들 파일로 묶어주는 것이다
그 중 웹팩이라는 번들러가 가장 많이 쓰이고 있다.

웹팩을 이용한 번들링을 해주는 가장 큰 이유는 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이다.
js 파일이 많고 코드의 양이 증가할 수록 웹 페이지의 로딩 속도와 성능은 저하될 수 밖에 없고, 웹 페이지가 느려진다면 유저가 이탈할 가능성이 높아진다.
이 때 webpack이 있다면 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있게 된다.
그 외에도 코드 난독화(보완), 압축, 최적화와 같은 작업을 지원하기 때문에 webpack의 이용량이 높다고 할 수 있다.

번들링과 빌드와는 조금 차이가 있는 것 같다
빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업을 말한다.
번들링은 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업. 즉, 말 그대로 묶음의 개념을 말한다

 

webpack의 작동원리

웹 팩의 공식페이지에 가보면 핵심 개념으로 나와있는 것들이 있다.
최근 webpack(webpack 4.0.0 이후)은 설정파일 없이도 작동할 수 있게 업데이트 되어있지만, 세부 설정을 하기 위해서 webpack.config.js 파일을 수정할 일이 생길 수 있다.

이 설정 파일에서 나오는 개념들에 대해서 정리해보려고 한다.

- Entry
코드의 '시작점'이라고 생각하면 편할 것 같다.
Entry 속성을 설정하여 기본 값 외의 다른 값이나 여러 entry point를 지정할 수 있다.
entry point를 기반으로 Webpack은 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다

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

- Output
생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 알려주는 속성
Output내에도 많은 속성이 있지만 몇 가지만 대표적으로 적어보자면 filename은 생성된 파일의 파일명을 어떻게 할 것인지에 대한 속성, path는 절대경로로 이루어진 파일 저장 경로를 적어준다.

module.exports = {
	...
  output: {
    path: '/home/proj/cdn/assets/[fullhash]', // 절대 경로로 설정을 해야 한다. 
    filename: "app.bundle.js",
  },
};

기본 출력 파일은 ./dist/main.js로 생성된다

- loaders
우리가 파일과 파일의 연결을 위해 사용하는 import/export는 모듈간의 의존성을 표현하는 방식이다.

Webpack은 깁본적으로 JS와 JSON 파일만 이해하기 때문에 loader를 이용해서 webpack이 다른 유형의 파일(css,ts 등)을 처리하거나 유효한 모듈로 변환 하여 사용할 수 있다.

loder를 이용하려면 상위에서 적어줘야 하는 속성이 있다
 1. 변환이 필요한 파일들을 식별하는 test
 2. 변환을 수행하는데 사용되는 로더를 가리키는 use 속성
이 두가지 필수 속성을 넣어 규칙을 정하기 위해서는 module.rules 아래에 정의해야 한다.

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

위의 코드는 webpack 컴파일러에게 '.css' 파일로 확인되는 경로를 발견하면 번들에 추가하기 전에 css-loader 를 사용해서 변환해줘 라는 명령을 내리는 것과 같다.

- Plugins
plugins를 사용하면 번들을 최적화하거나 환경변수 주입 등의 등의 광범위한 작업을 수행할 수 있다.

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

플러그인을 사용하기 위해서는 require()를 통해 플러그인을 먼저 요청해야 한다.
그리고 plugins 배열에 사용하고자 하는 플러그인을 추가해야 한다. 대부분의 플러그인은 사용자가 옵션을 통해 지정할 수 있다.

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

- Mode
mode 파라미터를 development, production, none 로 설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있다.

기본 값은 production이다.

- Browser Compatibility
Webpack은 ES5가 호환되는 모든 브라우저를 지원한다

그 외에

- Optimization
Webpack은 버전 4.0.0 부터 선택한 항목에 따라 최적화를 실행 할 수 있다.

---

https://webpack.kr/concepts