웹팩이란

웹팩

웹팩은 모듈들을 모두 합쳐서 하나의 파일을 생성하는 번들러(bundler) 도구들 중 하나로, 리액트에서 주로 사용되고 있다.
대표적인 번들러로는 웹팩, Parcel, browserify가 있다.
 
 

리액트의 대표적인 모듈을 불러오는 코드

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import logo from './logo.svg';
import './App.css';

 
create-react-app 을 이용하여 만든 리액트 프로젝트는 src/index.js를 시작으로 필요한 파일을 다 불러와서 번들링하게 된다.
이 때, 웹팩의 로더(loader) 기능은 여러 파일을 불러오는 기능을 하는데 어떤 파일을 불러오냐에 따라 여러 로더가 존재한다.

• CSS 파일을 불러오는 css-loader
• 웹 폰트나 미디어 파일 등을 불러오는 file-loader
• 자바스크립트 파일들을 불러오면서 ES5 문법으로의 호환성을 담당하는 babel-loader

로더는 원래 직접 설치하고 설정해야 하기 때문에 create-react-app 으로 만든 프로젝트도 커스터마이징이 가능하다.