Webpack에 대하여

in Study / Things I'm Interested In

Webpack에 대해서 학습하고 기록합니다.

개요

얼마 전 인프런에서 ‘캡틴판교’님의 타입스크립트 강의를 듣다가, 강의 리스트 중에서 ‘프론트엔드 개발자를 위한 웹팩’이라는 강의를 접하게 되었습니다.

여태 웹팩이 대강 어떤 일을 하는지 알고는 있었지만, 이번 기회에 웹팩에 대해 좀 더 깊이 알고자 하는 마음에 강의를 수강하였습니다.

인프런 웹팩 수료증

이번 글에서는 이 강의를 통해 알게 된 내용을 정리해보고자 합니다.


웹팩이란?

먼저 웹팩(Webpack)이 어떤 일을 하는지부터 알아봅시다.

웹팩은 프론트엔드 개발에서 가장 많이 사용되는 모듈 번들러입니다.

여기서 모듈이란 단순히 자바스크립트의 import나 export를 사용하는 모듈 시스템만을 뜻하지 않습니다.

웹팩에서의 모듈은 HTML, CSS, JS, 이미지, 폰트 등 모든 파일을 지칭합니다.


모듈 번들러의 의미

웹팩의 가장 중요한 기능은 여러 모듈을 하나의 파일(또는 여러 파일)로 번들링하는 것입니다. 번들링이란 여러 개의 파일을 하나의 파일로 묶어주는 과정을 의미합니다. 번들링을 통해 네트워크 요청을 줄이고, 웹 애플리케이션의 로딩 속도를 개선할 수 있다. 이는 특히 대규모 애플리케이션에서 중요한 역할을 합니다.


웹팩이 필요한 이유

그렇다면 왜 프론트엔드 개발에서 웹팩이 필요할까요?

  1. 파일 단위의 자바스크립트 모듈 관리 필요성: 모듈을 통해 코드의 재사용성을 높이고, 유지보수를 쉽게 할 수 있습니다.
  2. 웹 개발 작업 자동화 도구: 웹팩은 빌드, 번들링, 파일 압축, 코드 스플리팅 등의 작업을 자동화해줍니다.
  3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능: 웹팩은 코드를 최적화하고, 불필요한 파일을 제거함으로써 애플리케이션의 성능을 향상시킵니다.

이 중에서 특히 인상 깊었던 부분은 웹 애플리케이션의 빠른 로딩 속도와 높은 성능에 관한 것이었습니다.

https://www.youtube.com/watch?v=WQue1AN93YU

이 영상을 보면, 웹팩을 적용 전과 후의 실제 속도를 비교해볼 수 있는데, 웹팩을 적용했을 때 속도가 얼마나 빨라지는지 확인할 수 있습니다.


강의에서 배운 부분

이 강의에서는 웹팩이 어떻게 이미지를 압축하고 코드를 변환하는지에 대해 깊이 다루지는 않습니다.

대신, 웹팩이란 무엇인지, 왜 필요한지, 웹팩을 사용하기 위해 어떻게 환경을 구성하는지에 대해 설명해줍니다. 특히, 다른 프로젝트에서 웹팩 환경을 마주했을 때 그 설정을 이해하고 활용할 수 있도록 도와주는 점이 유익했습니다.

강의에서는 웹팩의 기본적인 설정인 config 설정에 대해 배웠다. 웹팩은 크게 네 가지 속성으로 구성됩니다.:

  1. entry
  2. output
  3. loader
  4. plugin

1. Entry

entry는 웹팩에서 웹 자원을 변환하기 위해 필요한 최초의 진입점이자 자바스크립트 파일 경로입니다. 웹팩은 entry에 지정된 파일을 기준으로 모듈을 연결하며, 이를 통해 전체 애플리케이션의 의존성 트리를 구축합니다. 이 과정에서 웹팩은 다른 모든 모듈을 찾아내고, 이를 결합하여 최종 번들을 생성합니다.

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


2. Output

output은 웹팩의 결과물이 저장되는 위치와 파일 이름을 설정하는 속성입니다. 번들된 파일이 저장될 디렉토리와 파일명을 정의할 수 있으며, 다수의 entry를 사용할 경우 다수의 output 설정도 가능합니다.

module.exports = {
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};


3. Loader

loader는 웹팩이 자바스크립트 이외의 파일을 처리할 수 있도록 도와주는 속성입니다. 예를 들어, CSS, 이미지, 폰트 파일을 자바스크립트 모듈로 변환해줍니다. rules 속성에 다양한 로더를 설정하여, 파일의 변환 방식을 정의할 수 있습니다.

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


4. Plugin

plugin은 웹팩이 번들링된 결과물의 형태를 바꾸거나, 추가적인 기능을 제공하는 데 사용됩니다. 로더가 파일을 처리하는 도중에 변환하는 역할이라면, 플러그인은 번들된 이후의 결과물을 처리하는 역할을 합니다. 예를 들어, HTML 파일을 자동으로 생성해주거나, 환경 변수를 설정할 수 있습니다.

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

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


이 후 여담

사실 웹팩에 대해서 내가 추가적으로 설정하거나 실습한 부분이 많지 않아서 아쉬운 부분이 있습니다. 추후 프로젝트에서 더 많은 정보를 알고 있다면 도움이 될 것 같습니다.

다만, 이번 강의를 통해 웹팩의 기본 개념과 설정 방법을 알게 되어, 앞으로 프로젝트에서 웹팩 설정 파일을 읽고 수정하는 데 큰 도움이 될 것입니다.