왜 이러는 걸까?

참고 : 번역) 10분 만에 웹팩 배우기(Learn webpack in under 10minutes)
참고(원본) : Learn webpack in under 10minutes

옛날 create-react-app을 지원을 안 했을 때, 리액트 조상님들은 한 리액트 프로젝트를 만들기 위해서 환경설정을 다 해주어야 했다. 지금은 편하게 명령어 하나만 입력하면 끝나는 일이 되었다.
하지만 개발자가 되어서 리액트를 사용하는데 그 기반을 구성하는 게 무엇인지 궁금했다. 개발자의 숙명 아닐까. 원시적인 코드까지 봐놔야 끝가지 본 것 같은 시원함.

Webpack이 어떻게 쓰이나?

리액트에만 들어서면 모듈 불러오기를 import로 해왔다. ES6부터 지원하는 방식이다. 리액트를 한 번 즈음 사용해본 사람들은 경험해봤겠지만 import 외에 다른 모듈 불러오기 방식을 신경쓸 일이 없다. 이런 획일된 방식은 개발을 좀 더 편하게 만든다.
그리고 하나는, 이번에 Webpack을 배우면서 느낀 것은 React의 SPA를 가능게 한 것이 이 프레임워크 덕분일 것이라는 것이다. React가 굳이 Index.js로 사용되는 모든 컴포넌트들을 모아 놓는 이유가 이 때문일 것이라고 생각된다. 이따 설명할 Entry Point로 Index.js가 의존하고 있는 모든 컴포넌트들을 모아놓고, Build를 한 JS파일에 모아서 해준다. 이런 기능도 Webpack에서 제공을 하고 있다.

---

Webpack 구성 요소

• Entry Point : 모든 의존 객체들이 모인 웹팩의 시작점 정의. 의존들은 의존 그래프를 생성.
• Output : JS와 정적 파일들을 모아 놓는 파일 정의.
• Loaders : 웹팩이 다양한 파일 확장자를 다룰 수 있게 도와주는 서드파티 확장 프로그램들. JS가 아닌 파일들을 모듈로 바꿔준다.
• Plugins : 웹팩의 동장 방식을 바꿔주는 서드파티 확장 프로그램들
• Mode : 개발(development)와 생산(production) 두 모드로 정의.

---

Babel은 어디에 쓰이나?

리액트에서는 JSX가 거리낌 없이 쓰인다. 하지만 그냥 Node.js 프로젝트를 만들어서 JSX를 쓰면, 혹은 브라우저에서 바로 JSX를 사용하면 오류를 발생시킬 것이다. 이것을 가능케 하는 것이 Babel이다.
Babel은 Javascript의 JSX, ES6, ES5 등 진보한 코드 작성문을 이전 버전으로 변환하여 코드를 실행시켜주는 일종의 컴파일러다. 우리가 만든 React 프로젝트가 Build되어 브라우저에서 잘 작동되는 이유는 Babel 덕분이다.

---

React 프로젝트 만들어보기

Webpack 설치하기

우선 작업할 폴더로 들어가 Webpack을 npm으로 설치해보자

npm init -y

npm install --save-dev webpack webpack-cli webpack-dev-server

그리고 우리가 작성한 리액트 컴포넌트들이 최종적으로 모일 Entry Point를 설정해주자.
이후 Build를 했을 때 최종적으로 만들어질 파일을 설정한다.

// webpack.config.js 파일 생성해서 작성
const path = require("path");

export.module = {
  entry : {index : path.resolve(__dirname, "src", "index.js")},
  output : {path : path.resolve(__dirname, "build"), filename : "main.js"}
}

webpack을 설정하는 파일에서는 ES 이전 자바스크립트로 작성한다.

간단하게 index.js를 작성해본다.

console.log("This is my first time in Webpack.");

그리고 CLI(Command Line Interface, 이하 CLI)로 명령을 입력해 작업 중인 파일들을 Build할 수 있게 스크립트를 작성해 준다.

// package.json 파일
{
  ...
	"scripts": {
      "dev" : "webpack -mode development"
    }
  ...
}

이후 CLI에서 npm run dev를 실행하면 위에서 설정한 build폴더에 main.js로 파일이 생성된다. 주의할 점은 src에 index.js가 존재해야 한다는 것이다.

output 설정이 따로 안 되어 있을시 기본적으로 dist 폴더에 index.js로 Build된다.

---

HTML 파일 불러오기

HTML 파일을 불러오기 위해서는 Webpack에 플러그인을 달아야한다. 우선 관련 모듈을 npm으로 설치해준다.

npm install --save-dev html-webpack-plugin

설치한 모듈을 웹팩에서 사용할 수 있게 설정을 해준다.

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

export.module = {
  entry : {index : path.resolve(__dirname, "src", "index.js")},
  output : {path : path.resolve(__dirname, "build"), filename : "main.js"},
  plugins : {new HTMLPlugin({
    	template : path.resolve(__dirname, "src", "index.html"),
  )},
}

이러면 이제 npm run dev 명령을 실행했을 때, index.js가 포함된 index.html이 같이 Build된다. 물론 src 폴더에 index.html이 작성되어 있어야 한다.
그리고 여기서부터는 우리가 코드를 작성하자마자 바로 index.html을 리로드해서 볼 수 있게 개발용 서버를 실행시키게 만들어준다.

// package.json 파일
{
  ...
	"scripts": {
      "dev" : "webpack -mode development",
      "start" : "webpack-dev-server -mode devlopment --open"
    }
  ...
}

이제 npm run start를 CLI에서 실행하면 우리가 작성하고 있는 html 문서를 별도의 build 과정 없이 확인할 수 있다.

---

CSS 파일 적용하기

CSS파일은 Loader를 이용한다. Webpack에서 CSS를 읽을 수 있게 하는 Loader를 먼저 설치하자.

npm install --save-dev style-loader css-loader

style-loader는 DOM에서 스타일 시트를 불러오는 데 사용이 되고, 'css-loader'는 css 파일을 불러오는 데 사용된다.
이제 이 Loader의 사용을 설정해줘야한다.

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

export.module = {
  entry : {index : path.resolve(__dirname, "src", "index.js")},
  output : {path : path.resolve(__dirname, "build"), filename : "main.js"},
  plugins : {new HTMLPlugin({
    	template : path.resolve(__dirname, "src", "index.html"),
  )},
  module : [
	{
		test : /\.css$/
		use : ["style-loader", "css-loader"],
	}
  ]
}

Loader 설정을 해줄 떄 주의할 점은 Loader가 아닌 Module에 작성해줘야 한다는 것이다. 그리고 어떤 파일에 적용할 지는 test 프로퍼티에서 가리킬 수 있다. 여기서는 정규표현식으로 작성을 해주었다. '.css' 확장자를 사용하는 파일에 적용시킬 것이라는 뜻이다. use 프로퍼티에서는 css를 불러오는 것을 도와줄 loader를 등록한다. 이 배열의 명시된 Loader들은 오른쪽에서 왼쪽으로 적용되므로 순서를 주의해야 한다.

---

React 연동하기

이제 Babel이 등장한다. 앞으로 우리는 React에서 자랑하는 JSX를 사용해야하기 때문이다. 우선 Babel을 npm으로 설치한다.

npm install --save-dev @babel/core @babel/preset-react babel-loader

위에서 이미 눈치 챈 사람들은 다음 진행해야 될 게 무엇인지 알아차릴 것이다. 설치한 loader를 등록해야한다.

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

export.module = {
  entry : {index : path.resolve(__dirname, "src", "index.js")},
  output : {path : path.resolve(__dirname, "build"), filename : "main.js"},
  plugins : {new HTMLPlugin({
    	template : path.resolve(__dirname, "src", "index.html"),
  )},
  module : [
	{
		test : /\.css$/,
		use : ["style-loader", "css-loader"],
	},
    {
        test : /\.js$/,
        exclude : /node_modules/,
        use : ["babel-loader"],
    }
  ]
}

하지만 이번에는 새로운 작업이 필요하다. Babel에 React 적용을 위한 preset 을 등록해줘야 하기 때문이다.

// babel.config.json 에 작성
{
	"presets" : ["@babel/preset-react"]
}

이제 npm으로 React를 설치해야 한다.

npm install --save-dev react react-dom

이 프로젝트는 드디어 React를 사용할 수 있다. 간단한 출력을 하는 React 컴포넌트를 만들어 띄어본다.

import React from "react";
import ReactDom from "react-dom/client";

const root = ReactDom.createRoot(document.quereySelector("#id"));
root.render(
	<div>
  		<p>This is my first time in Webpack </p>
    </div>
)

index.html에는 반드시 id가 root인 엘리먼트가 하나 존재해야 한다.

---

완성된 프로젝트 디렉터리 구조

+-- src
	+-- index.css
	+-- index.html
    +-- index.js
+-- babel.config.json
+-- package-lock.json
+-- package.json
+-- webpack.config.js

참고 : Webpack 이용 Github 레파지터리