2023-10-28: Vite / Webpack으로 프로젝트 세팅하기

⚡ Vite로 프로젝트를 생성해보자!

터미널에 다음과 같이 입력하자.

$ npm create vite@latest

다음과 같이 환경을 세팅해주자.

Need to install the following packages:
create-vite@4.4.1
Ok to proceed? (y) y
√ Project name: ... .
√ Select a framework: » React
√ Select a variant: » TypeScript

세팅이 완료되면 이제 패키지를 설치해주자.

$ npm install

패키지까지 설치가 완료되었다면, 개발 환경을 실행시켜 로컬 환경 구동을 진행해보자.

$ npm run dev

> vite-setting@0.0.0 dev
> vite

// 아래와 같이 떴다면 로컬 환경이 구동됐다는 것이다!
  **VITE v4.5.0**  ready in **869** ms

  ➜  **Local**:   http://localhost:**5173**/
  ➜  **Network**: use **--host** to expose
  ➜  press **h** to show help

로컬 주소를 들어가서 다음 화면을 확인하면 정상적으로 세팅이 완료됐다. 렛츠 코딩!

📦 Webpack으로 프로젝트를 생성해보자!

다들 요즘 Vite로 React 환경을 구축하는 데에는 다 이유가 있다…. Webpack으로 구축을 해보려니 세팅할 게 생각보다 많아지는데, 하지만 이를 통해서 프로젝트를 완전히 처음부터 세팅하는 느낌이라 한번쯤 시도해보는 건 되게 좋을 것 같다.

package.json을 생성하기.

아래의 커맨드를 터미널에 입력해 package.json을 생성하자.

$ npm init -y

// 커맨드 입력 후, 아래와 같이 package.json이 생성됐다는 로그가 출력된다.
Wrote to D:\code\project\bundle-practice\webpack-setting\package.json:

{
  "name": "webpack-setting",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

React를 사용하기 위한 필수 라이브러리 설치

다음의 커맨드들을 입력하여 라이브러리를 설치해보자.

// react 라이브러리 설치
$ npm install react react-dom

// typescript와 react type 라이브러리 설치
$ npm install -D typescript @types/react @types/react-dom

// tsconfig.json 파일 생성
$ tsc --init

본격적인 webpack 설정

기본 라이브러리 설치도 완료됐다면 이제 webpack도 아래와 같이 설치를 진행해주자.

// 웹팩 라이브러리 설치
$ npm install webpack

// 웹팩 command-line interface 설치
$ npm install webpack-cli

// 아래의 패키지 설치
// html-webpack-plugin: 웹팩에서 실행되어 나오는 결과물이 변경될 때마다
// html 파일을 자동으로 수정해주는 플러그인
// webpack-dev-server: 개발할 때 사용하는 웹 개발 서버
// ts-loader: ts 파일을 js로 변환해주는 웹팩 로더
$ npm install html-webpack-plugin webpack-dev-server ts-loader

개발 환경에 맞게 webpack 설정 적용

webpack 설정 파일을 통해서 개발 환경에서만, 배포 환경에서만, 두 환경 모두에 반영되도록 하는 기능들을 적용할 수 있다.

각 환경 파일은 아래와 같이 구분한다.

webpack.common.js
- 개발 및 배포 모두에 공용적으로 적용할 설정을 관리하는 파일
webpack.dev.js
- 개발 환경에서만 적용될 설정을 관리하는 파일
webpack.prod.js
- 배포 환경에서만 적용될 설정을 관리하는 파일

해당 내용을 학습하기 위해 다른 분이 작성하신 webpack.common.js 파일을 참고하여 webpack에서 쓰이는 각 설정을 정리해봤다.

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

module.exports = {
  // 개발 환경인지, 배포 환경인지를 설정할 수 있음.
  // development, production 두 가지가 있다.
  mode: "development",

  // 번들링을 시작할 파일을 설정할 수 있다.
  // 해당 파일 안에 import된 파일들을 webpack이 따라가면서 연관 파일을 모두 번들링해준다.
  entry: "./src/index.tsx",

  // 번들링된 결과 파일들에 대한 설정
  output: {
    // 번들링 파일 결과물
    filename: "bundle.js",
    // 번들링 결과 파일 경로
    path: path.resolve(__dirname, "dist"),
    // 번들링 시, 이전에 생성된 번들링 파일을 지울지 설정
    clean: true,
  },

  // 모듈 혹은 파일을 어떻게 해석할 것인지를 설정할 수 있다.
  resolve: {
    // 확장자 설정 - 이 경우, import할 때 확장자를 생략할 수 있다.
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },

  // 웹팩 기본 제공에 추가적으로 사용할 수 있는 확장 기능
  module: {
    // 각 파일에 적용할 로더를 설정할 수 있다.
    rules: [
      {
        // 로더를 적용할 파일의 확장자를 정규식으로 표현
        test: /\.(js|ts|tsx)$/i,
        // 정규 표현식에 해당되는 파일 중, 로더를 적용하지 않을 케이스를 적용
        exclude: /node_modules/,
        // 위의 로더를 적용할 파일들의 '로더'를 설정
        use: {
          loader: "ts-loader",
        },
      },
    ],
  },

  // 모듈은 번들링할 때에 적용될 확장 기능이라면
  // 플러그인은 위의 아웃풋, 즉 번들링된 결과물에 적용될 확장 기능들이다.
  plugins: [
    // 여기서는 아까 html-webpack-plugin 패키지를 설치했으므로,
    // 자동으로 index.html을 생성해주는 HtmlWebpackPlugin를 추가한다.
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],

    // 개발자 도구를 열 때 출력되는 소스맵을 어떻게 생성할지 규칙을 정한다.
  // [!] 소스 맵: 웹 개발자가 변환된 코드를 디버깅 시, 원본 소스의 어디를 참조해야하는지 도와주는,
  // 원본 코드와 매핑된 코드가 어디서 묶였는지 선언되어있는 파일을 가리킨다.
  devtool: "inline-source-map",

  // 코드가 변경될 때마다 자동으로 컴파일해주도록 하는 웹팩의 개발 서버 설정
  // webpack-dev-server 패키지를 설치하면 이용할 수 있다.
  devServer: {
    // webpack-dev-server를 로컬 환경에서 실행하기 위해 적용할 경로 파일
    static: "./dist",
    // 입력한 정보가 유지된 상태에서 수정된 부분만 바꿀지,
    // 아니면 새로고침 등을 해야만 수정된 정보를 반영할지를 설정함.
    hot: true,
    // 서버가 시작되면 웹 페이지를 자동으로 오픈해줄지 설정함.
    open: true,
  },
};

아래의 코드들은 개발 환경과 배포 환경에서 각각 적용될 설정들이다.

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  // eval로 설정하면 모든 코드를 eval을 통해 묶어서 코드를 압축함.
  // 개발 빌드를 할 때 해당 값을 이용하면 빌드와 리빌드도 빠르게 처리할 수 있다.
  devtool: "eval",
  devServer: {
    // React로 만든 SPA 같은 단일 index.html 페이지에서 history API를 이용해 가짜 주소를 만들어줄 것인지 설정
    // true로 할 경우, 서버에 없는 경로를 있는 것처럼 인식시킬 수 있음.
    historyApiFallback: true,
    // 개발 서버를 열 때, 어떤 로컬 환경 포트로 서버를 띄워줄 것인지 설정
    port: 3000,
    hot: true,
  },
});