Webpack이란? CRA 없이 직접 설정하기, 다른 모듈 번들러와의 비교 (feat. vite, turbopack, rollup, parcel)

Rachel·2024년 8월 9일
0

React

목록 보기
2/3
post-thumbnail

웹팩(Webpack)은 현대 웹 개발에서 매우 중요한 역할을 하는 모듈 번들러(module bundler)입니다. 웹팩을 이해하고 효과적으로 사용하는 것은 프론트엔드 개발자에게 필수적인 기술 중 하나입니다. 웹팩은 코드의 구조를 최적화하고, 개발 효율성을 높이며, 성능 향상을 도모할 수 있는 강력한 도구입니다.

1. 웹팩(Webpack)이란?

웹팩은 자바스크립트, CSS, 이미지, 폰트 등 다양한 자산(assets)을 하나의 파일 또는 여러 파일로 번들링하여 웹 애플리케이션의 로딩 속도와 성능을 최적화하는 도구입니다. 웹팩은 모듈을 관리하고 의존성을 해결하여 최종적으로 하나의 번들로 묶어줍니다. 이를 통해 코드의 복잡성을 줄이고, 성능을 개선할 수 있습니다.

2. 웹팩의 주요 개념

2.1. Entry (엔트리)

  • 엔트리는 웹팩이 번들링을 시작하는 지점을 의미합니다. 일반적으로 엔트리는 자바스크립트 파일이며, 이 파일을 시작으로 모든 의존성을 추적하여 번들을 생성합니다.

  • 기본적인 웹팩 설정에서 entry 속성은 필수입니다.

    module.exports = {
  entry: "./src/index.js", // 웹팩이 번들링을 시작할 파일
};

2.2. Output (아웃풋)

  • 아웃풋은 웹팩이 생성한 번들을 저장할 위치와 파일 이름을 지정하는 속성입니다. 번들링된 파일이 output에 정의된 경로에 저장됩니다.

    module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"), // 번들된 파일의 저장 경로, path.resolve를 사용해 절대 경로 생성
    filename: "bundle.js", // 번들된 파일 이름
  },
};

2.3. Loaders (로더)

  • 로더는 웹팩이 자바스크립트 외의 파일을 처리할 수 있게 해주는 도구입니다. 예를 들어, CSS, 이미지, 폰트 파일 등을 모듈로 취급하고, 이를 자바스크립트 파일에서 사용할 수 있게 변환해줍니다.

  • 로더는 파일의 전처리를 담당하기도 합니다. 즉, 특정 파일을 변환하거나 처리하여 웹팩이 번들에 포함할 수 있는 형태로 만드는 역할을 합니다.

  • 로더는 module.rules 속성에서 정의하며, 특정 파일 유형에 대해 어떤 로더를 사용할지 지정합니다.

    module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // .css 확장자를 가진 파일에 대해
        use: ["style-loader", "css-loader"], // style-loader와 css-loader를 적용
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i, // 이미지 파일에 대해
        type: "asset/resource", // 자산 리소스로 처리
      },
    ],
  },
};

2.4. Plugins (플러그인)

  • 플러그인은 웹팩의 기능을 확장하거나, 번들링 과정에서 발생하는 다양한 작업을 수행하기 위해 사용됩니다. 예를 들어, HTML 파일을 자동으로 생성하거나, 코드 압축, 환경 변수 설정 등을 할 수 있습니다.

  • 대표적인 플러그인으로는 HtmlWebpackPlugin, CleanWebpackPlugin, MiniCssExtractPlugin 등이 있습니다.

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 번들링된 JS 파일을 포함할 HTML 파일 템플릿
    }),
  ],
};

2.5. Mode (모드)

  • 웹팩은 mode 설정을 통해 개발(development) 모드와 프로덕션(production) 모드를 구분합니다.

  • 개발 모드에서는 디버깅을 용이하게 하고, 프로덕션 모드에서는 코드 최적화(압축, 난독화 등)를 수행합니다.

    module.exports = {
  mode: "development", // 'development' 또는 'production'
};

3. 웹팩의 동작 과정

  1. 엔트리 포인트에서 시작: 웹팩은 설정된 엔트리 파일을 기준으로 모든 의존성을 추적합니다.
  2. 모듈 및 의존성 분석: 웹팩은 로더를 사용해 다양한 파일 유형을 처리하고, 모듈 간의 의존성을 분석합니다.
  3. 번들 생성: 웹팩은 분석된 모듈을 기반으로 하나 또는 여러 개의 번들을 생성합니다.
  4. 출력: 생성된 번들은 output에 정의된 경로에 저장됩니다.

4. 웹팩의 실사용 예시

4.1. 개발 환경에서의 사용

  • 개발 환경에서는 webpack-dev-server를 사용해 실시간으로 변경사항을 반영하며 개발할 수 있습니다.
  • 소스 맵(source map)을 사용해 디버깅을 쉽게 할 수 있습니다.
module.exports = {
  mode: "development",
  devtool: "inline-source-map", // 소스 맵을 활성화
  devServer: {
    contentBase: "./dist", // 개발 서버의 파일 제공 경로
  },
};

4.2. 프로덕션 환경에서의 사용

  • 프로덕션 모드에서는 번들 파일을 최적화하여 배포할 수 있습니다.
  • 코드 압축, 환경 변수 설정, 코드 스플리팅 등을 통해 성능을 극대화합니다.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "production",
  output: {
    filename: "[name].[contenthash].js", // 캐싱을 위한 해시 추가
    path: __dirname + "/dist",
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],
};

5. 웹팩의 고급 기능

5.1. 코드 스플리팅 (Code Splitting)

코드 스플리팅은 번들을 여러 개로 나누어 성능을 최적화하는 기법입니다. 이를 통해 초기 로딩 시간을 줄이고, 필요할 때만 코드가 로드되도록 할 수 있습니다.

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all", // 중복된 모듈을 별도의 청크로 분리
    },
  },
};

5.2. 트리 쉐이킹 (Tree Shaking)

트리 쉐이킹은 사용하지 않는 코드를 제거하여 번들 크기를 줄이는 기법입니다. ES6 모듈 시스템을 사용하는 경우 웹팩은 자동으로 트리 쉐이킹을 수행합니다.

module.exports = {
  mode: "production", // 프로덕션 모드에서 트리 쉐이킹 활성화
};

6. 웹팩 설정 파일 (webpack.config.js)

  • 웹팩 설정 파일은 일반적으로 프로젝트 루트에 webpack.config.js라는 이름으로 작성됩니다.

  • 이 파일을 통해 웹팩의 엔트리, 아웃풋, 로더, 플러그인 등을 구성할 수 있습니다.

    const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(), // dist 폴더 정리
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  mode: "development", // 또는 'production'
};

✏️ 정리 - 웹팩을 왜 쓰나요?

웹팩은 프론트엔드 개발자의 생산성을 크게 향상시킬 수 있는 도구입니다. 웹팩을 사용하면 코드의 모듈화를 유지하면서도 최적화된 번들을 생성할 수 있으며, 다양한 로더와 플러그인을 통해 다양한 파일 형식을 처리하고, 최신 웹 기술을 손쉽게 도입할 수 있습니다. 프론트엔드 개발자는 웹팩을 사용하여 보다 효율적이고 관리하기 쉬운 애플리케이션을 구축할 수 있습니다.

✏️ 용어 정리

모듈 번들러란?

모듈 번들러(Module Bundler)는 여러 개의 파일로 나누어진 모듈(예: 자바스크립트 파일, CSS 파일, 이미지 등)을 하나 또는 여러 개의 번들(bundle) 파일로 묶어주는 도구입니다. 모듈 번들러는 애플리케이션을 구성하는 모든 자산(assets)을 하나의 모듈로 취급하고, 이러한 모듈 간의 의존성을 분석하여 최종적으로 효율적인 배포를 위해 번들 파일을 생성합니다.

모듈 번들러의 필요성

모던 웹 애플리케이션은 일반적으로 복잡한 구조를 가지며, 여러 개의 자바스크립트 파일, CSS 파일, 이미지 파일 등이 서로 의존관계를 맺고 있습니다. 이러한 구조에서는 다음과 같은 문제들이 발생할 수 있습니다:

  1. 의존성 관리: 여러 파일 간의 의존성을 관리하기 어렵습니다. 어떤 파일이 어떤 파일에 의존하는지, 어떤 순서로 로드해야 하는지 등을 수동으로 관리하는 것은 매우 번거롭습니다.
    👉 모듈 번들러는 애플리케이션의 엔트리 포인트에서 시작하여 모든 모듈의 의존성을 분석합니다. 이를 통해 각 모듈이 필요한 순서에 따라 번들에 포함되도록 합니다.

  2. 네트워크 요청 과다: 파일이 많아질수록 웹 페이지를 로드하는 데 필요한 네트워크 요청이 증가하게 됩니다. 이는 페이지 로딩 속도를 저하시키고 사용자 경험을 악화시킬 수 있습니다.
    👉 분석된 모듈을 하나의 파일 또는 여러 개의 파일로 번들링합니다. 이를 통해 애플리케이션에서 필요한 자산을 최소한의 네트워크 요청으로 로드할 수 있습니다.

  3. 코드 최적화: 각 파일에 포함된 중복된 코드나 사용하지 않는 코드(dead code)를 관리하고 제거하는 것이 어렵습니다.
    👉 모듈 번들러는 코드 최적화 작업도 수행합니다. 예를 들어, 중복된 코드를 제거하거나 사용되지 않는 코드를 제거하여 번들 크기를 줄이고, 로딩 속도를 향상시킵니다. 코드 스플리팅, 트리 쉐이킹 등과 같은 고급 최적화 기법을 지원합니다.

  4. 브라우저 호환성: 번들러는 최신 자바스크립트 문법을 구 버전의 브라우저에서도 동작할 수 있도록 트랜스파일링(transpiling)해줍니다.
    👉 모듈 번들러는 자바스크립트 파일뿐만 아니라 CSS, 이미지, 폰트 등의 파일도 처리할 수 있습니다. 이를 위해 로더(Loaders)와 플러그인(Plugins)을 사용하여 다양한 파일 형식을 지원합니다. 예를 들어, SCSS 파일을 CSS 파일로 변환하거나, 최신 자바스크립트 문법을 오래된 브라우저에서도 동작하도록 변환할 수 있습니다.

모듈 번들러는 이러한 문제를 해결하기 위해 등장한 도구입니다.

대표적인 모듈 번들러

  1. 웹팩(Webpack): 가장 널리 사용되는 모듈 번들러로, 강력한 기능과 유연한 설정을 자랑합니다. 다양한 플러그인과 로더를 통해 거의 모든 파일 형식을 처리할 수 있으며, 코드 스플리팅, 트리 쉐이킹 등의 고급 최적화 기법을 지원합니다.

  2. 롤업(Rollup): 주로 라이브러리 번들링에 특화된 모듈 번들러로, 웹팩보다 간단한 설정과 더 작은 번들 크기를 제공합니다. 트리 쉐이킹에 강점을 가지고 있어, 불필요한 코드를 제거하는 데 효과적입니다. ESM을 중심으로 설계된 모듈 번들러.

    • 롤업은 오픈 소스 라이브러리(예: lodash, d3.js)나 작은 패키지를 개발할 때 많이 사용됩니다. 롤업의 플러그인 시스템을 통해 다양한 형식으로 라이브러리를 번들링할 수 있습니다.
    • ESM(ECMAScript Module) 지원: 롤업은 ESM을 기본적으로 지원하여, 현대적인 모듈 시스템을 사용하는 프로젝트에서 유용합니다. 예를 들어, 라이브러리를 개발할 때, ESM 형식으로 배포하기 위해 롤업을 사용할 수 있습니다.

  3. 파셀(Parcel): 설정이 거의 필요 없는 “제로 설정” 모듈 번들러로, 개발자가 번들링 설정에 시간을 들이지 않고도 빠르게 개발을 시작할 수 있도록 도와줍니다. 또한, 멀티 코어를 활용하여 번들링 속도가 빠릅니다.

    • 신속한 프로토타이핑: 빠르게 프로토타입을 만들고 싶을 때, 파셀을 사용하면 설정 파일 없이 프로젝트를 빠르게 시작할 수 있습니다. 예를 들어, 개발 초기 단계에서 빠르게 기능을 구현하고 테스트하기에 적합합니다.
    • 소규모 프로젝트: 소규모 웹 애플리케이션이나 개인 프로젝트에서 파셀은 뛰어난 선택입니다. 복잡한 빌드 설정 없이 다양한 기능을 지원하여, 빠른 개발이 가능합니다.

실무에서의 사용 예

프론트엔드 개발자는 모듈 번들러를 사용하여 여러 개의 파일을 효율적으로 관리하고, 애플리케이션을 최적화할 수 있습니다. 예를 들어, 웹팩을 사용하여 자바스크립트 파일을 번들링하고, SCSS 파일을 CSS 파일로 변환하며, 이미지 파일을 최적화하는 과정을 설정할 수 있습니다. 이를 통해 개발자는 코드의 구조를 유지하면서도 성능 최적화를 달성할 수 있습니다.

ESM이란?

ESM(ECMAScript Module)은 자바스크립트에서 모듈 시스템을 표준화한 사양입니다. ESM은 ES6(ECMAScript 2015)에서 도입된 모듈 시스템으로, 자바스크립트 코드를 모듈화하여 재사용성과 유지보수성을 높이기 위해 설계되었습니다. 이전의 모듈 시스템들(예: CommonJS, AMD)과는 달리, ESM은 자바스크립트 언어 자체의 표준으로 자리 잡았습니다.

주요 특징

  1. 파일 단위의 모듈: ESM에서는 각 파일이 독립적인 모듈로 취급됩니다. 모듈은 다른 모듈에서 내보낸(export) 변수나 함수를 가져오기(import)하여 사용할 수 있습니다.
  2. 정적 분석 가능: ESM은 정적 분석이 가능하도록 설계되었습니다. 모듈의 의존성이 코드 실행 전에 결정되므로, 트리 쉐이킹과 같은 최적화 기법을 적용하기 쉽습니다.
  3. 엄격한 모드: ESM은 자동으로 엄격 모드(“use strict”)가 적용됩니다. 이는 실수나 버그를 줄이고, 더 나은 성능을 보장합니다.
  4. 비동기 로드 지원: ESM은 비동기적으로 모듈을 로드할 수 있어, 특히 브라우저 환경에서 성능 최적화에 유리합니다.

🔥 터보팩(Turbopack)이란?

터보팩(Turbopack)은 Vercel에서 개발한 초고속 웹 애플리케이션 번들러로, 기존의 웹팩(Webpack)을 대체할 수 있는 새로운 도구로 자리매김하고 있습니다. 터보팩은 특히 성능과 빌드 속도에 중점을 두고 설계되었으며, 대규모 프로젝트에서도 빠른 빌드 타임을 제공하는 것을 목표로 합니다.

터보팩의 주요 특징

  1. 속도: 터보팩의 가장 큰 장점은 빌드 속도입니다. Rust로 작성된 터보팩은 고성능을 자랑하며, 웹팩과 비교하여 빌드 속도가 최대 수십 배 빠르다고 알려져 있습니다. 이로 인해 대규모 애플리케이션에서의 빌드 시간을 크게 단축할 수 있습니다.

  2. 점진적 번들링(Incremental Bundling): 터보팩은 변화가 발생한 파일만 재번들링하는 점진적 번들링 방식을 채택하여, 불필요한 빌드 시간을 줄이고 빠른 피드백을 제공합니다. 이를 통해 개발자는 더 빠르게 코드를 작성하고 테스트할 수 있습니다.

  3. Rust 기반: Rust로 작성되어 높은 성능과 메모리 안전성을 보장합니다. 이는 JavaScript로 작성된 기존의 번들러들보다 더 나은 성능을 제공합니다.

  4. 완전한 웹팩 대체는 아님: 현재 터보팩은 일부 기능에서 웹팩을 완전히 대체하지는 않습니다. 특히 플러그인 생태계나 일부 고급 기능에서는 웹팩이 여전히 더 강력한 선택일 수 있습니다. 그러나 터보팩은 빠른 성능을 요구하는 프로젝트에서 웹팩의 대안으로 유망한 선택지가 되고 있습니다.

터보팩의 사용 사례

터보팩은 특히 Next.js 프로젝트에서 잘 통합되어 사용됩니다. Vercel은 Next.js의 개발사로, Next.js 프로젝트에 최적화된 번들러를 제공하기 위해 터보팩을 개발했습니다. Next.js 13 버전부터 터보팩이 웹팩의 대체제로 제공되며, 개발 환경에서 빠른 빌드 속도를 제공합니다.

터보팩은 고성능을 요구하는 대규모 프로젝트나 빌드 시간이 중요한 프로젝트에서 주로 사용됩니다. 특히 대규모 코드베이스를 다루는 기업형 애플리케이션에서 터보팩의 속도 향상 효과를 극대화할 수 있습니다.

웹팩과의 비교

  • 성능: 터보팩은 웹팩보다 훨씬 빠른 빌드 속도를 제공합니다. 특히 대규모 프로젝트에서 그 성능 차이가 더 크게 나타납니다.
  • 생태계: 웹팩은 수년간 개발되어 온 방대한 플러그인과 설정 옵션을 가지고 있습니다. 터보팩은 아직 초기 단계에 있으며, 일부 고급 기능에서는 웹팩이 더 유리할 수 있습니다.
  • 사용성: 웹팩은 다양한 플러그인과 설정을 지원하는 유연한 도구이지만, 설정이 복잡할 수 있습니다. 터보팩은 더 간단한 설정을 목표로 하고 있으며, 기본 설정만으로도 빠른 번들링이 가능합니다.

결론

터보팩은 웹팩의 대체제로서 강력한 번들링 성능을 제공하지만, 현재로서는 웹팩과 상호 보완적인 관계로 사용할 수 있습니다. 특히 빠른 빌드 속도가 중요한 프로젝트에서 터보팩은 매력적인 선택이 될 수 있습니다.

Next.js에서의 모듈 번들링

Next.js는 웹팩을 내부적으로 사용하여 번들링 작업을 수행합니다. 그러나 Next.js는 개발자가 웹팩 설정을 직접 다루지 않도록 대부분의 설정을 자동화해둔 상태로 제공됩니다. 이는 개발자가 설정보다는 개발 자체에 집중할 수 있도록 돕습니다.

Next.js에서 기본 웹팩 설정을 커스터마이징해야 할 경우, next.config.js 파일을 사용합니다.

// next.config.js
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // 웹팩 설정 수정
    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));

    // 커스텀 설정을 반환
    return config;
  },
};

Next.js와 웹팩, 터보팩의 관계

Next.js는 초기에는 웹팩(Webpack)을 내부적으로 사용해 왔으나, Next.js 13부터는 터보팩(Turbopack)을 도입하여 성능을 개선하고 있습니다. 그러나 웹팩과 터보팩을 동시에 사용하는 것은 아닙니다. 개발자가 선택할 수 있는 옵션으로, 기본적으로는 웹팩을 사용하되, 터보팩을 사용하고자 할 때는 터보팩을 활성화할 수 있습니다.

비교

  • 웹팩(Webpack): 전통적으로 Next.js는 웹팩을 사용하여 모듈 번들링과 개발 환경을 지원해 왔습니다. 웹팩은 강력한 플러그인 생태계를 가지고 있으며, Next.js는 기본적으로 웹팩을 사용해 개발 모드에서 HMR(Hot Module Replacement) 등 다양한 기능을 제공합니다.

  • 터보팩(Turbopack): Next.js 13에서 소개된 새로운 모듈 번들러로, 성능을 극대화하기 위해 설계되었습니다. 터보팩은 웹팩보다 훨씬 빠르게 번들링 작업을 수행할 수 있도록 설계되었으며, 특히 대규모 프로젝트에서 빌드 속도를 크게 개선합니다. 터보팩은 Rust로 구현되어 있어 높은 성능을 자랑합니다.

웹팩과 터보팩의 선택

  • Next.js 13 이전: 기본적으로 웹팩이 사용됩니다.
  • Next.js 13 이후: 기본적으로 웹팩이 사용되지만, next.config.js에서 옵션을 설정하여 터보팩을 활성화할 수 있습니다. 개발자는 프로젝트 요구에 따라 웹팩을 계속 사용할 수도 있고, 터보팩으로 전환할 수도 있습니다.

⭐️ React, Next.js에서의 모듈 번들링 핵심 포인트 정리

  • 트리 쉐이킹: 사용하지 않는 코드를 제거하여 최종 번들의 크기를 줄이는 기능. Next.js는 기본적으로 트리 쉐이킹을 지원합니다.

  • 코드 스플리팅: 번들 파일을 여러 개로 나누어 필요한 부분만 로드하게 함으로써 초기 로드 시간을 단축. React와 Next.js 모두 코드 스플리팅을 쉽게 구현할 수 있습니다.

  • 핫 모듈 리플레이스먼트(HMR): 코드 변경 시 전체 페이지를 새로고침하지 않고도 변경된 부분만 업데이트하는 기능. Next.js는 개발 모드에서 HMR을 기본으로 지원합니다. React에서는 CRA으로 생성된 프로젝트에 HMR이 자동으로 설정되어 있습니다.

    • webpack-dev-server 또는 webpack-hot-middleware를 설정하여 HMR을 활성화할 수 있습니다.

🤔 React에서 CRA 없이 webpack을 직접 설정하려면?

npx create-react-app을 사용할 수도 있지만, 웹팩을 수동으로 설정하는 예시

  1. React 프로젝트 설정
mkdir react-webpack-example
cd react-webpack-example
npm init -y // or yarn init -y
  1. 필요한 패키지 설치
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

  1. 폴더 구조

    react-webpack-example/
    ├── node_modules/
    ├── public/
    │ └── index.html
    ├── src/
    │ ├── index.js
    │ └── App.js
    ├── package.json
    ├── webpack.config.js
    └── .babelrc

폴더 구조는 프로젝트에 따라 변경될 수 있음.

  1. Webpack 설정 (webpack.config.js)

TypeScript, tailwindCSS, babel을 사용하는 Webpack 설정 예시

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

module.exports = {
  entry: "./src/index.tsx", // TypeScript 엔트리 파일
  output: {
    filename: "bundle.[contenthash].js", // 해시를 사용해 캐싱 문제를 해결
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"], // TypeScript와 JavaScript 파일의 확장자 처리
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/, // .ts, .tsx 파일을 처리
        use: "babel-loader", // Babel을 사용해 TypeScript를 컴파일
        exclude: /node_modules/,
      },
      {
        test: /\.css$/, // .css 파일을 처리
        use: [
          MiniCssExtractPlugin.loader, // CSS 파일을 별도로 추출
          "css-loader", // CSS를 JS로 변환
          "postcss-loader", // Tailwind CSS를 처리하기 위해 postcss-loader 사용
        ],
      },
      {
        test: /\.(png|jpg|gif|svg)$/, // 이미지 파일을 처리
        type: "asset/resource", // 파일을 별도로 관리
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html", // HTML 템플릿 파일
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css", // CSS 파일의 이름 패턴
    }),
  ],
  devServer: {
    static: path.join(__dirname, "dist"), // 개발 서버에서 제공할 정적 파일 경로
    compress: true,
    port: 3000,
    hot: true, // HMR 활성화
    open: true, // 개발 서버가 시작될 때 브라우저 자동 열기
  },
};

tailwindCSS는 post.config.js 설정, 설치 후 tailwind.config.js 파일이 추가로 필요합니다.
TypeScript는 tsconfig.json 파일 설정이 필요합니다.

  1. Babel 설정 (.babelrc)
{
  "presets": [
    "@babel/preset-env", // 최신 JavaScript 문법 변환
    "@babel/preset-react", // React 문법 변환
    "@babel/preset-typescript" // TypeScript 변환
  ]
}

  1. React 컴포넌트 작성

    src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

src/App.js

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, React with Webpack!</h1>
    </div>
  );
}

export default App;

  1. HTML 템플릿 작성

    public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Webpack Example</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.html이 최상위 경로에 있을 수도 있음.
-> webpack.config.js에서 경로 수정 필요

 template: './index.html',
  1. package.json 스크립트 추가
{
  "name": "react-webpack-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^5.0.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.0.0"
  }
}
  1. 애플리케이션 실행
npm start

개발 서버를 시작하고, 브라우저에서 해당 애플리케이션 확인 가능

✏️ Vite

Vite란?

Vite는 차세대 프론트엔드 환경을 제공하는 번들러로, 특히 개발 서버와 빌드 성능 면에서 매우 빠른 속도를 자랑합니다. Vite는 ES 모듈을 기본으로 사용하여, 개발 중에는 브라우저가 필요한 모듈만 동적으로 로드하게 함으로써 빠른 핫 모듈 리플레이스먼트(HMR)를 제공합니다. 또한, 빌드 단계에서는 Rollup을 사용하여 최적화된 번들을 생성합니다.

Vite와 Webpack의 관계

Vite와 Webpack은 모두 모듈 번들러로서의 역할을 하지만, 접근 방식과 사용 사례가 다릅니다.

  • 개발 속도: Vite는 개발 서버를 제공할 때 ES 모듈 기반으로 작동하며, 필요한 모듈만 즉시 로드하기 때문에 초기 로딩이 매우 빠릅니다. 반면, Webpack은 초기 번들링을 수행해야 하기 때문에 비교적 느릴 수 있습니다.
  • 빌드 속도: Vite는 Rollup을 사용해 빌드를 최적화하며, Webpack은 다양한 플러그인과 설정을 통해 빌드를 최적화합니다. Vite는 단순하고 빠른 빌드에 유리하며, Webpack은 복잡한 애플리케이션에 대한 세밀한 설정이 가능합니다.
  • 생태계와 확장성: Webpack은 수년간의 발전을 통해 방대한 플러그인 생태계를 구축해 왔으며, 거의 모든 형태의 프로젝트에 적용할 수 있습니다. 반면, Vite는 비교적 새로운 도구로, 빠른 성능을 제공하지만, 특정 플러그인이나 설정이 필요한 복잡한 프로젝트에서는 Webpack이 더 적합할 수 있습니다.
  • 사용 사례: Vite는 빠른 개발 피드백이 중요한 소규모 프로젝트나 프로토타이핑에 적합하며, Webpack은 대규모 애플리케이션이나 복잡한 빌드 설정이 필요한 프로젝트에 적합합니다.

두 도구는 상호 보완적인 관계에 있으며, 프로젝트의 요구 사항에 따라 적절한 번들러를 선택하는 것이 중요합니다. Vite는 특히 최신 프로젝트에서 빠르게 자리 잡고 있지만, Webpack은 여전히 많은 대규모 프로젝트에서 사용되고 있습니다.

추가하면 좋은 부분이나 잘못된 점이 있다면 댓글 남겨주세요. 감사합니다 :)

profile
Rachel
기존 블로그: https://hi-rachel.tistory.com
이전 포스트

[React] useEffect에 대한 오해, 리액트 생명주기, strictMode

다음 포스트

[React] useState의 동작 원리

0개의 댓글