Webpack: 개념과 설정

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

JiYoung Dev 🖥

Webpack: 개념과 설정 본문

Study/React

Webpack: 개념과 설정

Shinjio 2024. 11. 27. 22:22

부트캠프에서 React를 처음 접했을 때 CRA(react-create-app)을 통해 앱을 구성하고 실행하였다. 회사에 입사한 후 프론트엔드 개발을 맡게 되면서 프로젝트를 구성하게 되었는데, CRA의 경우 내장 라이브러리가 많아서 규모가 커지면 성능 문제가 발생할 수 있다는 글을 보게 되었다. 따라서 이번 프로젝트에서는 CRA가 아닌 직접 Webpack을 적용하였는데(CRA가 자동으로 Webpack을 적용), 그 과정에서 Webpack이 무엇인지, 어떤 역할을 하는지, 각 설정에 대해 알아보고자 한다.

🔎 Webpack이란

Webpack은 모던 Javascript 애플리케이션을 위한 정적 모듈 번들러이다.

Javascript를 위한 모듈 번들러가 Webpack만 있는 것은 아니다. 하지만 이번 포스팅에서는 내가 직접 다뤄본 Webpack만을 설명한다.

모듈 번들러(Module Bundler)
분리된 코드를 하나의 파일로 병합하는 개발 도구 각각의 모듈들에 대해 의존성 관계를 파악하여 그루핑해주는 것
즉, Javascript 모듈을 브라우저에서 실행할 수 있는 단일 Javascript 파일로 묶는데 사용되는 도구
CSS, 폰트, 이미지, JS를 정적인 파일로 변환하고 하나로 합쳐주는데 사용

Webpack을 사용하는 이유

더하기와 곱셈을 수행하는 애플리케이션(.js)가 있다고 가정한다. 우리는 유지관리를 더 쉽게 하기 위해 위와 같이 별도의 파일로 분리하였다.

index.html

<html>
<head>
    <script src="src/sum.js"></script>
    <script src="src/multiply.js"></script>
    <script src="src/index.js"></script>
</head>
</html>

index.js

var totalMultiply = multiply(5, 3); //multiply.js
var totalSum = sum(5, 3); //sum.js
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);

muliply.js

var multiply = function (a, b) {
    var total = 0;
    for (var i = 0; i < b; i++) {
        total = sum(a, total);
    }
    return total;
};

sum.js

var sum = function (a, b) {
    return a + b;
};

위의 index.html의 출력 결과는 아래와 같다.

Product of 5 and 3 = 15 Sum of 5 and 3 = 8

위의 코드에서 우리는 multiply.js와 index.js 모두가 sum.js에 의존한다는 것을 알 수 있다.

만약 index.html에서 index.js의 script 코드를 multiply.js 위 혹은 sum.js 위에 위치시키게되면 작동하지 않는다.

만약 현재보다 훨씬 더 확장되고 더 큰 큐모의 애플리케이션에서 작동한다고 생각해 봤을 때, 하나의 애플리케이션에는 수십 개의 종속성이 있을 수 있으며, 그 중 일부는 서로 의존한다. 이 질서를 위와 같이 유지하는 것은 쉽지 않을 것이다.

또한, 여기에 전역 변수를 사용하게 되면 다른 코드가 변수를 덮어 쓸 위험도 있고, 이로 인해 찾기 어려운 버그가 발생할 수 있다.

아래 예제 코드를 확인해보자.

index.html

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <script src="./src/math.js"></script>
    <script src="./src/app.js"></script>
  </body>
</html>

main.js

function sum(x, y) {
  return x + y;
}

app.js

sum(1, 2);

console.log(sum(1, 2)); // 3

sum.js

var sum = function (a, b) {
    return a + b;
};

위와 같이 애플리케이션이 구성되었을 때 문제는 sum이 전역 스코프에 노출되면 발생한다.

sum = 1;
sum(3,4) //Uncaught TypeError: sum is not a function;

만약 전역으로 sum에 1을 새롭게 할당한다면 이제 sum이라는 함수를 호출할 수 없는 상황이 되어버린다.

Webpack은 이러한 종속성을 모듈로 변환하여 관리하며, 이 모듈을 번들링하여 모든 종속성을 단일 파일로 끌어 올 수 있다.

🔎 Webpack 설정

Webpack.config.(c/m)js

webpack.config.js 파일은 최상단에 위치하여 Webpack이 실행될 때 참조하는 설정 파일이다.

이번 프로젝트를 구성하면서 내가 사용한 설정 파일이다. 현재 내가 만든 프로젝트는 ECMAscript 문법을 사용하여 webpack.config.mjs 파일로 작성하였다.

import Dotenv from "dotenv-webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";

export default {
  name: "app_webpack_name",
  mode: "development",
  resolve: {
    extensions: [".js", ".jsx"],
    alias: {
      "@components": path.resolve(process.cwd(), "src/components"),
      "@pages": path.resolve(process.cwd(), "src/pages"),
    },
    fallback: {
      path: "path-browserify",
      url: "url",
    },
  },
  entry: {
    app: path.resolve(process.cwd(), "src/index.js"),
  },
  output: {
    path: path.resolve(process.cwd(), "dist"),
    filename: "bundle.js",
    publicPath: "/",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new Dotenv({
      path: "./.env.develop",
    }),
  ],
  devServer: {
    historyApiFallback: true,
    static: "./dist",
    port: 3000,
    open: true,
    hot: true,
  },
};

name

Webpack 설정의 이름

주로 Webpack의 Multi-Compiler 설정에서 여러 설정 파일을 구분하는데 유용

mode

Webpack의 모드 설정

development: 디버깅을 위한 설정(최적화 미적용, 소스맵 생성)
production: 최적화를 적용해 파일 크기를 줄이고 성능을 높임
none: 기본값, 최적화나 디버깅 없이 빌드

Resolve

extensions: 파일 확장자를 생략할 수 있도록 지정
alias: 모듈 경로를 단축하기 위해 별칭 지정
fallback: Node.js 모듈을 브라우저 환경에서도 사용할 수 있도록 대체 모듈을 지정
- path-browserify: 브라우저 환경에서 Node.js의 path 모듈을 대체
- url: 브라우저 환경에서 Node.js의 url 모듈을 대체

entry

애플리케이션이 실행되며 Webpack이 번들링을 시작하는 곳

Webpack은 entry point가 의존하는 다른 모듈과 라이브러리들을 찾아낸다.

output

output 속성은 번들 결과물의 경로를 설정하고 이름을 지정하는 옵션 등을 추가할 수 있다.

path: 번들링된 결과물의 위치를 설정할 수 있다.
filename:번들링된 결과물의 이름을 설정할 수 있다.
publicPath: 애플리케이션이 리소스를 로드할 기본 URL 경로

Module Rules

rules: 파일 유형별 처리 방식을 정의
- test: 처리할 파일 확장자 패턴
- exclude: 제외할 디렉토리
- use: 사용할 로더 지정

loader

웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 HTML, CSS 등 웹 자원들을 변환할 수 있도록 도와준다. 자주 사용되는 로더는 babel-loader, css-loader, style-loader, file-loader 등이 있다.

기본적으로 Webpack은 Javascript 및 JSON 파일만 해석이 가능하다. 하지만 로더(loaders)를 사용하면 Webpack이 다른 포맷의 파일을 처리하고, 이를 앱에서 사용할 수 있는 모듈로 변환할 수 있다.

test: loader를 적용시킬 파일 유형 명시(정규표현식)
use: 해당 파일에 적용할 loader 명시
exclude: loader를 배제시킬 파일 명시

plugin

Webpack으로 변환한 파일에 추가적인 기능을 제공할 수 있다. 플러그인은 해당 결과물의 형태를 바꿔주는 역할을 수행한다.

HtmlWebpackPlugin: 번들링된 JS 파일을 자동으로 HTML 파일에 삽입
- template: 템플릿으로 사용할 HTML 파일 지정
Dotenv: 환경변수 로드

DevServer

Webpack 개발 서버 설정

historyApiFallback: SPA에서 클라이언트 사이드 라우팅 지원
static: 정적 파일을 제공할 디렉토리
port: 개발 서버가 사용할 포트 번호
open: 개발 서버 실행 시 브라우저를 자동으로 열도록 설정
hot: HMR(Hot Module Replacement) 활성화. 애플리케이션을 새로고침하지 않고도 변경된 모듈을 즉시 반영

❤ 참고자료

https://ingg.dev/webpack/

https://tech.osci.kr/create-react-app-없이-배우는-webpack/

https://blog.ag-grid.com/webpack-tutorial-understanding-how-it-works/

저작자표시

'Study > React' 카테고리의 다른 글

Frontend Fundemental (토스, 프론트엔드 좋은 코드 작성하기) 정리 (1)	2025.01.16
Javascript Call Stack, Callback Queue, Event Loop (2)	2024.11.29
[React] 드래그 앤 드롭 파일 업로드 기능 구현 (1)	2024.11.05
[React] Spring Boot와 연동하여 shop 만들기 (2023.06.09) (0)	2023.06.09
[React] 개발 참고 사이트 및 템플릿 적용하는 법 (2023.06.09) (0)	2023.06.09

'Study/React' Related Articles

JiYoung Dev 🖥

Webpack: 개념과 설정 본문

Webpack: 개념과 설정

🔎 Webpack이란

Webpack을 사용하는 이유

index.html

index.js

muliply.js

sum.js

index.html

main.js

app.js

sum.js

🔎 Webpack 설정

Webpack.config.(c/m)js

name

mode

Resolve

entry

output

Module Rules

loader

plugin

DevServer

❤ 참고자료

'Study > React' 카테고리의 다른 글

티스토리툴바