logo
menu

🤔 웹팩에 대하여 알아보자!

2022. 06. 07.

  • #개발환경

💡
김정환 개발자님의 블로그를 참고하여 학습했고 이를 기반으로 정리한 내용입니다.

알게될 내용

  • 웹팩의 정의와 등장 배경에 대하여 알 수 있다.
  • 웹팩이 등장하기 전에 JS에서 모듈을 처리한 방법에 대하여 알 수 있다.
  • 웹팩의 필수 옵션(mode, entry, output) 에 대하여 알 수 있다.
  • 웹팩의 로더와 플러그인에 대하여 알 수 있다.

개요

프론트엔드 개발을 하면서 개발 환경에 대해 관심이 많았고, 웹팩을 사용하지만 자세히 안다는 느낌을 받지 않았다. 그래서 이 참에 제대로 학습해 해당 내용을 공유하고자 한다.
해당 포스트에서는 실제 개발 환경에서 사용하는 웹팩을 다루지 않고, 웹팩이 무엇인지에 대하여 서술하고자 한다.
(이후에 바닐라JS 환경, 리액트 환경, 타입스크립트 기반 리액트 환경을 포스트 하고자 한다.)
또한, 온라인에서 웹팩을 검색하면 모듈 번들러라고 설명한다. 이 말을 들었을 때 항상 '모듈이 뭔데!! 모듈 번들러가 뭔데!!!! 웹팩이 도대체 뭔데!!' 라고 생각했었는데 막상 알고보니깐, "웹팩은 모듈 번들러다." 라는 말이 정확한 거 같다. 저처럼 같은 마음이 이었던 분이라면 해당 포스팅을 보고 "웹팩은 모듈 번들러이다." 라는 말을 이해가 되었으면 한다.

웹팩 등장 배경

웹팩을 알기에 앞서 웹팩이 등장한 배경부터 알아보자
웹팩은 모듈 번들러이다.
웹팩은 각각의 자원들을(.js, .tx, .css, .jpg 등) 모듈로 인식하고 해당 모듈들을 하나로 만들어주는 기능이다.
notion image
그림을 보면 자원들이(.js, .hbs 등) 여러 파일(왼쪽)로 되어 있는데 이를 하나의 형태(오른쪽)로 합쳐주는 기능을 한다.
 
그렇다면 이런 기능이 왜 필요했을까? 이전의 자바스크립트에서 여러 기능을 제공하기 위해 어떻게 처리되었는지 알아보자!
  1. 각각의 JS 파일을 html 에 삽입해서 처리
  1. IIFE 를 사용하여 처리
  1. 모듈 스펙을 사용하여 처리
 

각각의 JS 파일을 html 에 삽입해서 처리

서비스를 제공하기 위해 여러 JS 파일을 생성하여 처리할 때 여러 JS 파일을 작성하고 이를 html 에 삽입하는 방식으로 JS 기능을 처리했다.
예를 들어
  • math.js
      • // math.js
function sum(a, b) {
  return a + b;
}
  • app.js
      • console.log(sum(1, 2)); // 3
  • index.html
      • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="src/math.js"></script>
    <script src="src/app.js"></script>
  </body>
</html>
이와 같이 여러 JS 파일을 작성하고 사용하는 방식을 사용했다.
하지만, 이렇게 개발할 경우, 전역 스코프가 오염되는 문제가 있다.
(각각의 파일에서 같은 변수명을 사용할 경우 변수명이 같아 충돌되어 원하는 로직대로 수행되지 않는 이슈)
 

IIFE 방식의 모듈

1에서 각각의 JS 파일을 작성하고 html 에 작성하는 것은 전역 스코프가 오염되는 문제가 있어 이를 해결하기 위해 IIFE 방식을 사용하였다.
 
IIFE 방식은 함수가 정의되자마자 실행되어 함수 내부에서 정의된 내용은 함수 외부에서 접근할 수 없어 전역스코프가 오염되는 것을 예방할 수 있음.
  • math.js
      • var math = math || {};

(function () {
	function sum(a, b) {
		return a + b;
	}
	
	math.sum = sum;
})();
  • app.js
      • console.log(math.sum(1, 2));
이전 방식은 sum 이라는 함수가 전역으로 노출되었는데 IIFE 방식은 sum 함수가 노출되지 않음. 대신, math 라는 객체가 노출되어 접근할 수 있음.
 

다양한 모듈 스펙

JS 에는 다양한 모듈 시스템이 존재한다. 이후에는 모듈을 사용?
  1. CommonJS
      • JS를 사용하는 모든 환경에서 모듈을 하는 것이 목표
      • exports 키워드로 모듈을 만들고
          • require 키워드로 모듈을 부르는 방식
      • Node.js 에서 사용하는 방식
  1. AMD (Asynchronous Module Definition)
      • 브라우저 환경에서 사용
          • 브라우저처럼 외부에서 자바스크립트를 로딩해야하는 비동기 환경에서 사용
  1. UMD (Universal Module Definition)
      2. CommonJS 와 AMD 를 모두 지원해주는 방식.
 
이렇게 각자 다양한 모듈 스펙을 제안하다가 ES2015에서 표준 모듈 시스템을 내 놓았음.
현재는 바벨과 웹팩을 이용해 표준 모듈 시스템을 사용하는 것이 일반적
  • math.js
      • export function sum(a, b) {
  return a + b;
}
  • app.js
      • import * as math from "./math.js";
console.log(math.sum(1, 2)); // 3
  • index.js
      • <script type="module" src="app.js"></script>
 
하지만, 모든 환경(브라우저)에서 모듈 시스템을 지원하는 것이 아님! (크롬 61버전 이상 부터는 사용 가능, IE는 사용 불가)
그렇다면 브라우저와 무관하게 모듈을 사용하고자 한다면, 웹팩을 이용하여 가능하게 할 수 있다.
 
즉 웹팩이 등장한 이유를 아래와 같이 보고 있다.
JS에서 모듈 시스템이라는 개념을 만들고 제공하지만 모든 브라우저에서 해당 기능을 사용할 수 없는 문제 발생 → 웹팩을 이용하여 해결 가능!!
 
웹팩에 대하여 알기 전에 웹팩을 설치하자
npm install -D webpack webpack-cli
  • webpack : 번들 작업을 하는 webpack 패키지
  • webpack-cli : webpack 기능을 터미널 환경에서 수행하도록(명령어를 통해 작업)하는 패키지

웹팩이란?

위 내용에서 모듈이 필요한 이유와 모든 브라우저에서 모듈을 지원하는 것이 아니기 때문에 웹팩을 이용하여 문제를 해결 할 수 있다고 하였다.
웹팩이 해당 문제를 어떻게 해결 할 수 있는지에 대하여 알아보자!
 

웹팩 너는 누구니?

모듈로 개발을 하다보면 모듈간의 의존관계가 생김
웹팩은 모듈로 연결된 여러 가지 리소스(JS, css, image 등) 들을 하나로 합쳐주는 역할을 함.
해당 역할 즉, 여러 가지 자원들을 하나로 합쳐주는 기능을 번들링이라 함.
웹팩은 번들링을 하는 번들러 로 볼 수 있다. (하나로 합쳐주는 기능을 제공하는 주체?)
 
즉, 웹팩은 다양한 자원들을 모듈로 보고 각각의 모듈들을 하나로 합쳐주는(번들링) 역할을 하는 모듈 번들러이다.
 

웹팩 필수 옵션

  • mode
      • development(개발용), production(운영용), none
  • entry
      • 모듈이 시작되는 부분을 entry 라 함.
      해당 예제에서는 app.js 가 entry 임.
  • output
      • 번들링 결과물 위치 경로
 
아래와 같이 사용할 수 있다.
node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist/
그럼 root 위치에 dist/main.js 파일이 생성된다. 생성된 결과를 확인하기 위해 index.html 파일에 번들링된 파일을 삽입하여 확인해보자
  • index.html
      • <script type="module" src="dist/main.js"></script>
그럼 이전과 같은 결과를 확인할 수 있다.
 
이렇게 스크립트 명령어로 웹팩을 실행시키는데는 한계가 존재한다.
그래서 webpack 을 설정할 수 있는 파일을 생성하고자 한다.
웹팩은 설정 파일을 webpack.config.js 로 관리한다.
  • webpack.config.js
      • // webpack config 파일은 ES6 의 표준 모듈 시스템이 아닌, CommonJS 모듈 시스템 사용
const path = require("path");

module.exports = {
  mode: "development", // webpack 모드
  // 모듈 시스템의 진입점
  entry: {
    main: "./src/app.js",
  },
  // 번들링된 결과물 위치 경로
  output: {
    path: path.resolve("./dist"), // output 디렉터리 명, 절대 경로
    filename: "[name].js", // 번들링된 파일 명, 
// "[name]" 으로 설정한 이유는 entry 포인트가 여러 인 경우 아웃풋도 여러 개가 나와야하는데 
// 이를 동적으로 할 수 있게 처리하기위해
  },
};

/**
 * 예를 들어
 * etnry 에 main, main1 을 지정하면
 * entry: {
    main: "./src/app.js",
    main2: "./src/app2.js",
  },
 * output 에 [name] 으로 설정하여 main, main2로 파일을 생성할 수 있도록 설정
 */
웹팩 설정 파일을 작성한 후 실행해보자 
npx webpack
번들링된 결과물을 index.html 에 삽입해서 보면 정상 작동하는 것을 볼 수 있다.
 

로더

위 내용에서 웹팩의 정의와 간단한 사용법 그리고 웹팩 필수 옵션에 대하여 알아봤다.
이제 웹팩의 로더에 대하여 알아보자
 

로더란?

  • 웹팩은 모든 파일을 모듈로 처리한다(바라본다). (JS, CSS, IMAGE, 등 모든 파일을 모듈로 바라봄)
      • 그렇기 때문에 ES6의 import 키워드를 사용하면 해당 모듈을 자바스크립트 코드 안에서 사용할 수 있음.
      이것이 가능한 것은 웹팩의 로더 기능 때문임!
  • 로더는 모든 자원(파일)들을 자바스크립트 모듈로 만들어줌
      • CSS 파일을 JS 파일에서 직접 로딩해서 사용할 수 있게 해줌
  • CSS 파일을 JS 모듈처럼 사용할 수 있게 해주는 CSS 로더가 있는데 이는 CSS 코드를 JS 로 로드(삽입?) 시켜준다. 그래서 CSS 도 JS 모듈 처럼 사용할 수 있는데 이런 기능을 해주니깐 로더라고 부르는 거 같다!
      • 백문불여일견 이므로 css-loader 만 확인해보자 (아래 자주 사용하는 웹팩 로더 참고)
       

커스텀 로더를 구현해 보면서 자세히 알아보자!

  • loader/my-webpack-loader 
      • module.exports = function myWebpackLoader(content) {
  console.log("myWebpackLoader가 동작함");
  return content;
};

// 또는 console.log 기능을 alert 로 바꾸는 로더
/*
module.exports = function myWebpackLoader(content) {
  return content.replace("console.log(", "alert(");
};
*/
  • 로더는 웹팩 config 파일에서 module 객체의 rules 배열에 추가할 수 있음 
      • // webpack.config.js
const path = require("path");

module.exports = {
  mode: "development", // webpack 모드
  // 모듈 시스템의 진입점
  entry: {
    main: "./src/app.js",
  },
  // 번들링된 결과물 위치 경로
  output: {
    path: path.resolve("./dist"),
    filename: "[name].js",
  },
  // 로더 사용
  // 로더는 module 객체의 rules 배열에 등록할 수 있음.
  module: {
    rules: [
      {
        test: /\.js$/, // 로더가 처리해야할 파일의 패턴(정규표현식)
        use: [path.resolve("./loader/my-webpack-loader.js")], // 사용할 로더 명시
      },
    ],
  },
};
    • 웹팩 config 에서 module 객체의 rules 배열로 로더를 등록할 수 있다.
        • 로더를 등록할 때
        test 에 로더가 처리해야할 파일 들의 규칙을
        use 에 사용하고자 하는 로더를 명시 해야한다.
로더를 설정하고 웹팩을 수행
npx webpack

# ...
# myWebpackLoader가 동작함
# myWebpackLoader가 동작함
myWebpackLoader 가 동작함 문구가 2번 찍히는 것을 알 수 있다.
왜냐하면 js 로더가 수행하는 JS 파일이 2개 이기 때문이다.
 

자주 사용하는 웹팩 로더

위에서 계속 언급했던 것처럼 webpack 은 모든 자원(CSS, IMAGE 등)들을 모듈로 바라본다.
그래서 JS 파일에서 다양한 자원들을 import 구문으로 사용할 수 있다.
 
  • css-loader
      • CSS 파일을 자바스크립트 모듈 처럼 사용할 수 있도록 CSS 파일을 처리함.
  • style-loader
      • css 로더에서 처리된 자바스크립트 문자열로 되어있는 스타일스트 코드를 HTML 에 주입시켜 브라우저에 스타일이 적용되도록 함.
  • file-loader
      • 이미지 파일을 모듈로 사용할 수 있도록 변환하는 역할을 함.
  • url-loader
      • 파일을 base-64로 인코딩 해서 그 결과를 자바스크립트 문자열로 변환함.
      처리할 파일의 크기에 제한을 둬서 일정 파일 미만만 처리하도록 하고 그 이상은 file-loader 에서 처리하도록 함.

css-loader

자바스크립트에서 CSS 파일을 모듈로 부를 수 있게 해줌
사용하기
  • 관련 loader 설치
      • npm install -D css-loader
  • webpack 설정 파일에 적용하기
      • const path = require("path");

module.exports = {
  mode: "development", // webpack 모드
  // 모듈 시스템의 진입점
  entry: {
    main: "./src/app.js",
  },
  // 번들링된 결과물 위치 경로
  output: {
    path: path.resolve("./dist"), 
    filename: "[name].js", 
  },
  // 로더 사용
  // 로더는 module 객체의 rules 배열에 등록할 수 있음.
  module: {
    rules: [
      {
        test: /\.js$/, // 로더가 처리해야할 파일의 패턴(정규표현식)
        use: [path.resolve("./loader/my-webpack-loader.js")], // 사용할 로더 명시
      },
      {
        test: /\.css$/,
        use: ["css-loader"],
      },
    ],
  },
};
  • style.css
      • body {
  background-color: aqua;
}
  • app.js
      • import * as math from "./math.js";
import "./style.css";

console.log(math.sum(1, 2));
웹팩 수행 후 빌드된 dist/main.js 을 확인하면 스타일 정보인 background-color 가 삽입된 것을 확인할 수 있다.
npx webpack
notion image
 
css-loader 를 통해 css 파일을 JS 모듈로 인식하게끔은 성공했다. (JS 파일에만 CSS 코드가 존재, 브라우저에서 스타일을 입히지 않음)
JS 로 변경된 style 코드를 HTML 에 넣어주는 로더가 필요함 ⇒ style-loader
 
이후 부터는 설명에 필요한 코드만 작성하여 동작이 안 될 수 있다.

style-loader

위 작업에서 css-loader 는 css 정보를 js 파일로 로드하는 작업 만 수행
실제로 스타일을 적용하기 위한 로더로 style-loader 필요
npm install -D style-loader
// webpack config 파일은 ES6 의 표준 모듈 시스템이 아닌, CommonJS 모듈 시스템 사용
const path = require("path");

module.exports = {
  mode: "development", // webpack 모드
  // 모듈 시스템의 진입점
  entry: {
    main: "./src/app.js",
  },
  // 번들링된 결과물 위치 경로
  output: {
    path: path.resolve("./dist"), // output 디렉터리 명, 절대 경로
    filename: "[name].js", // 번들링된 파일 명, "[name]" 으로 설정한 이유는 entry 포인트가 여러 인 경우 아웃풋도 여러 개가 나와야하는데 이를 동적으로 할 수 있게 처리하기위해
  },
  // 로더 사용
  // 로더는 module 객체의 rules 배열에 등록할 수 있음.
  module: {
    rules: [
      {
        test: /\.js$/, // 로더가 처리해야할 파일의 패턴(정규표현식)
        use: [path.resolve("./loader/my-webpack-loader.js")], // 사용할 로더 명시
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};
로더는 한 파일에 대해서 여러 로더가 실행되는데 순서는 뒤→ 앞 으로 수행됨.
그래서 css-loader 수행 후 style-loader 수행

file-loader

로더는 CSS 파일 뿐만 아니라 이미지 파일도 처리할 수 있음.
그것을 가능하게 하는 것이 file-loader
import 구문으로 image 파일을 자바스크립트로 가져와서 사용할 수 있게 함.
 
사용하기
  • 설치
      • npm install -D file-loader
  • 웹팩 설정 파일
      • module.exports = {
	module: {
    rules: [
      {
        test: /\.js$/, // 로더가 처리해야할 파일의 패턴(정규표현식)
        use: [path.resolve("./loader/my-webpack-loader.js")], // 사용할 로더 명시
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png$/,
        use: ["file-loader"],
      },
    ],
  },
}
 
빌드를 수행하면 이미지 파일의 제목이 해쉬코드로 변경되는데 이는, 캐쉬 갱신을 위한 용도로 파악
이렇게 될 경우, CSS에서 설정한 이미지 파일명이 다르기 때문에 제대로 불러오지 못하는 이슈가 발생한다.
이를 해결하기 위해 file-loader 옵션을 조정해서 바로 잡아야 한다
  • webpack.config.js
      • const path = require("path");

module.exports = {
  mode: "development", // webpack 모드
  // 모듈 시스템의 진입점
  entry: {
    main: "./src/app.js",
  },
  // 번들링된 결과물 위치 경로
  output: {
    path: path.resolve("./dist"), 
    filename: "[name].js", 
  },
  // 로더 사용
  // 로더는 module 객체의 rules 배열에 등록할 수 있음.
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [path.resolve("./loader/my-webpack-loader.js")], 
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png$/,
        // use: ["file-loader"],
        loader: "file-loader",
        options: {
          publicPath: "./dist/", // prefix를 아웃풋 경로로 지정
          name: "[name].[ext]?[hash]", // 파일명 형식
          // name 은 원본 파일명, ext 확장자, hash 는 해시값
          // 그래서 'bg.png?6453a9c65953c5c28aa2130dd437bbde' 이런 형태 유지
          // 내가 봤을 때 , "[name].[ext]" 만 설정해도 잘 동작할 수 있는데, 쿼리스트링(?)+[hash]를 넣은 이유는 캐시를 해결하기 위한 용도 같음
        },
      },
    ],
  },
};
 

url-loader

사용하는 이미지 갯수가 많다면 네트웍 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 줄 수도 있다. 만약 한 페이지에서 작은 이미지를 여러 개 사용한다면 Data URI Scheme을 이용하는 방법이 더 나은 경우도 있다. 이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 형식이다.
Data URL Scheme
Data URL Scheme
⇒ url-loader 는 이런 처리를 자동화 해줌
사용하기
npm install -D url-loader
  • webpack 설정 파일
      • {
  test: /\.png$/,
  use: {
    loader: 'url-loader', // url 로더를 설정한다
    options: {
      publicPath: './dist/', // file-loader와 동일
      name: '[name].[ext]?[hash]', // file-loader와 동일
      limit: 5000 // 5kb 미만 파일만 data url로 처리 (이미지 파일을 base-64로 변환)
// 만약 5kb 이상인 경우는 file-loader 가 처리
    }
  }
}
    • 즉, url-loader 는 작은 이미지 파일들을 data url 로 처리할 때 사용하는 것이다.
        • limit 속성으로 파일 사이즈 크기를 정하고 해당 크기를 넘어간다면 file-loader 기능을 통해 dist 폴더에 파일이 생성될 것이고, url-loader 로 처리가 되었다면 번들링 된 파일 안에 해당 정보(이미지파일 정보)가 로드될 것이다.
 

플러그인

로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
그래서 번들된 JS 파일을 난독화하거나 최적화 하는 등 다양한 용도로 사용할 수 있다.
 

커스텀 플러그인을 구현해보면서 자세히 알아보자

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("My Plugin", stats => {
      console.log("MyPlugin: done")
    })
  }
}

module.exports = MyPlugin
로더와 다르게 플러그인은 클래스로 제작한다. apply 메소드를 구현하면 되는데 이 코드에서는 인자로 받은 compiler 객체 안에 있는 tap() 함수를 사용하는 코드다. 플러그인 작업이 완료되는(done) 시점에 로그를 찍는 코드인것 같다.
 
웹팩 설정 및 실행
const MyPlugin = require("./myplugin")

module.exports = {
	mode: "development", // webpack 모드
  entry: "./src/app.js",
  output: {
    path: path.resolve("./dist"),
    filename: "[name].js",
  },
  plugins: [new MyPlugin()],
}
npm run build

# > sample@1.0.0 build C:\Users\gyu\workspace\sample
# > webpack
# 
# MyPlugin: done
# ...
웹팩을 빌드해보니 MyPlugin: done 문자가 한 번만 찍혔다.
근데, 파일이 여러 개인데 한 번만 찍혔다. 그 이유는 플러그인은 번들된 파일(dist/main.js)이 하나이기 때문에 한 번만 동작한 것이다.
 
번들된 파일에 Banner 를 추가하는 커스텀 플러그인을 구현해보자
class MyPlugin {
  apply(compiler) {
    compiler.plugin("emit", (compilation, callback) => {
      const source = compilation.assets["main.js"].source();
      compilation.assets["main.js"].source = () => {
        const banner = [
          "/**",
          " * 이것은 MyPlugin 의 BannerPlugin이 처리한 결과입니다.",
          " * Build Date: 2021-9-10",
          " */",
          "",
        ].join("\n");
        return banner + "\n" + source;
      };

      callback();
    });
  }
}

module.exports = MyPlugin;
  • compiler.plugin() 함수의 두번재 인자 콜백함수는 emit 이벤트가 발생하면 실행되는 녀석
  • 번들된 결과가 compilation 객체에 들어 있는데 compilation.assets['main.js'].source() 함수로 접근 가능
 
빌드를 실행 후 결과를 확인하면 MyPlugin 에서 설정한 banner 값이 최상단의 추가된 것을 확인할 수 있다.
npm run build
notion image
 

자주 사용하는 플러그인

실무에서는 커스텀 플러그인을 만드는 것보다 이미 잘 만들어진 플러그인을 사용한다. 여러 플러그인 중에 자주 사용하는 것을 알아보자.
자세한 수행 방법 및 사용법은 해당 블로그를 참고하자
 
  • BannerPlugin
      • 결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다.
  • DefinePlugin
      • 서비스를 운영할 때 개발환경과 운영환경을 나눠서 운영하는데, 이때 API 주소 같은 환경 정보들을 관리하는데 도움을 준다.
  • HtmlWebpackPlugin
      • HTML 파일을 후처리하는데 사용한다. (동적으로 HTML 파일을 처리하고자 할 때)
      빌드 타임의 값을 넣거나 코드 압축, 또는 빌드된 script 파일을 추가하는 등.
  • CleanWebpackPlugin
      • 웹팩으로 빌드하면 output 옵션에 설정한 경로에 빌드된 결과물이 추가되는데 이전에 빌드된 결과를 지우고 새로 빌드된 결과물을 저장한다.
  • MiniCssExtractPlugin
      • 스타일시트(CSS 스타일 정보)가 많아지면 하나의 JS 파일(번들된 JS 파일 dist/main.js) 에 스타일 시트 정보를 만드는 것은 부담이 될 수 있다. (큰 파일 하나를 내려받는 것보다, 여러 개의 작은 파일을 동시에 다운받는 것이 더 빠름)
      이런 경우를 대비해서 스타일 코드만 뽑아서 여러 CSS 파일로 만드는 것이 좋은데 이런 기능을 해주는 플러그인이다.
       

정리

  • 웹팩은 다양한 모듈들(.js, .jsx, .css, .jpg 등)을 하나의 JS 코드로 압축하고 최적화하는 라이브러리이다.
  • 로더는 모든 자원(파일)들을 자바스크립트 모듈로 만들어줌
  • 자주 사용하는 로더는 아래와 같다.
    • css 로더
        • CSS 파일을 자바스크립트 모듈 처럼 사용할 수 있도록 CSS 파일을 처리함.
    • style 로더
        • css 로더에서 처리된 자바스크립트 문자열로 되어있는 스타일스트 코드를 HTML 에 주입시켜 브라우저에 스타일이 적용되도록 함.
    • file 로더
        • 이미지 파일을 모듈로 사용할 수 있도록 변환하는 역할을 함.
    • url 로더
        • 파일을 base-64로 인코딩 해서 그 결과를 자바스크립트 문자열로 변환함.
        처리할 파일의 크기에 제한을 둬서 일정 파일 미만만 처리하도록 하고 그 이상은 file-loader 에서 처리하도록 함.
  • 플러그인은 번들된 결과를 처리함.
      • 번들된 JS 파일을 난독화 하거나, 특정 텍스트를 추출하거나, 최적화를 적용하는 등 다양한 기능을 수행함.
  • 자주 사용하는 플러그인은 아래와 같다
    • BannerPlugin
        • 결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다.
    • DefinePlugin
        • 서비스를 운영할 때 개발환경과 운영환경을 나눠서 운영하는데, 이때 API 주소 같은 환경 정보들을 관리하는데 도움을 준다.
    • HtmlWebpackPlugin
        • HTML 파일을 후처리하는데 사용한다. (동적으로 HTML 파일을 처리하고자 할 때)
        빌드 타임의 값을 넣거나 코드 압축, 또는 빌드된 script 파일을 추가하는 등.
    • CleanWebpackPlugin
        • 웹팩으로 빌드하면 output 옵션에 설정한 경로에 빌드된 결과물이 추가되는데 이전에 빌드된 결과를 지우고 새로 빌드된 결과물을 저장한다.
    • MiniCssExtractPlugin
        • 스타일시트(CSS 스타일 정보)가 많아지면 하나의 JS 파일(번들된 JS 파일 dist/main.js) 에 스타일 시트 정보를 만드는 것은 부담이 될 수 있다. (큰 파일 하나를 내려받는 것보다, 여러 개의 작은 파일을 동시에 다운받는 것이 더 빠름)
        이런 경우를 대비해서 스타일 코드만 뽑아서 여러 CSS 파일로 만드는 것이 좋은데 이런 기능을 해주는 플러그인이다.
         
이렇게 웹팩 기본 개념에 대해 알아봤다.
이후에 바벨까지 학습한 내용을 공유하고 webpack@5 를 기준으로 바닐라JS 기반 환경 구축, ReactJS 기반 환경 구축, ReactTS 기반 환경 구축까지 포스팅하고자 한다.
 

reference