웹팩(webpack) 알러지 치료하기 - 1

create-react-app 없이 react를 설정할 수 있는 그날까지....!

 

배경

---

왜 webpack을 사용하기 시작했는지를 알아보자. 웹팩의 깃헙에서 웹팩을 아래와 같이 소개하고 있다.

webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

웹팩은 모듈(module)을 위한 번들러(bundler)이다. 그렇다면 모듈과 번들러에 대해 알아보자.

 

모듈(module)

모듈(module)은 재사용 가능한 코드조각이다. 모듈을 지원하기 시작한 것은 ES2015부터다. 보통 클래스 하나 또는 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.

초기 자바스크립트는 크기도 작고 기능도 단순해서 모듈에 관한 표준 문법이 필요하지 않았다. 시간이 흘러 웹에 요구되는 기능이 점점 복잡해지면서, 코드의 크기가 점점 커지기 시작했다. 이에 따라 자바스크립트 커뮤니티는 필요한 모듈을 언제든지 불러올 수 있게 해 주거나, 코드를 모듈 단위로 구성해 주는 방법 등 다양한 라이브러리를 만들었다. 'AMD', 'CommonJS', 'UMD'와 같은 시스템이 그 예이다. 이런 모듈 시스템은 오래된 스크립트에서 여전히 발견할 수 있는데, 이제는 역사의 뒤안길로 사라지고 있다.

모듈 시스템은 2015년에 표준 문법으로 등재되었다. 이제는 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원한다. 하지만 아쉽게도 모든 브라우져에서 모듈 시스템을 지원하지 않는다(IE....). 우리가 HTML파일에 <script> 태그로 로딩할 때 type=module을 사용하는 것이 모듈로 사용하고 있는 것이다.

 

번들러(bundler)

번들러는 여러개의 파일을 하나로 합쳐준다. 하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다. 자바스크립트 파일 뿐만 아니라 css, html, 이미지 파일 등을 하나의 결과물로 합쳐준다(물론 설정에 따라 여러개의 파일로 합치기도 가능하다).

번들링 전 스크립트에 있던import,export문은 특별한 번들러 함수로 대체된다. 번들링 과정이 끝나면 기존 스크립트에서 import,export가 사라지기 때문에 type="module"이 필요 없어진다. 따라서 아래와 같이 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취급할 수 있다.

<!-- 웹팩과 같은 툴로 번들링 과정을 거친 스크립트인 bundle.js -->
<script src="bundle.js"></script>

 

 

웹팩 맛보기

---

설치

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

npm을 초기화하고 webpack을 local로 설치한다. webpack-cli는 웹팩 터미널 도구이다.

 

설치 완료하면 node_modules/.bin폴더에 실행 가능한 명령어가 몇 개 생긴다. --help 옵션으로 사용 방법을 확인할 수 있다.

node_modules/.bin/webpack --help

 

이 중 --mode, --entry, --output 세 개 옵션만 사용하면 webpack을 사용할 수 있다.

node_modules/.bin/webpack --mode development --entry ./src/app.js --output dist/main.js

 

번들링된 결과는 --output 설정에서 정해주었듯이 dist/main.js에 있다. 이 코드를 index.html에 로딩하면 번들링 전과 똑같은 결과를 얻을 수 있다.

매번 이와 같은 코드를 치는 것은 너무 힘들기때문에 webpack.config.js 파일을 만들어 옵션을 코드로 저장할 수 있다. 기본 설정 파일로 이때의 모듈은 es6모듈이 아닌 node모듈이다. 

const path = require("path")

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
  },
}

 

mode

development, production, none 세가지 모드가 있다. 모드 설정에 따라 내장된 환경별 최적화를 활성화 할 수 있다. 기본 설정값은 production이다.

 

entry

복잡하게 얽혀있는 파일들의 시작점을 명시한다. 엔트리 파일을 명시해주어야 웹팩이 시작점을 찾을 수 있다. entry는 여러개가 될 수 있다.

 

output

번들링한 결과가 위치할 경로. [name]에 entry의 key 문자열이 들어가 파일 이름을 정한다(위 예시에서는 main.js로 결과가 나옴)

Entry 설정은 항상 프로젝트 디렉터리 내부이기 때문에 상대 경로로 하는 반면에, Output 설정은 항상 프로젝트 디렉터리 내부라는 보장이 없으므로 절대 경로로 한는 점을 주의해야 한다.

 

loader

로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환하여 모듈로 사용할 수 있도록 한다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만아니라 CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 해준다.

자주 사용하는 로더로 css-loader, style-loader 등이 있다.

여러개의 로더를 사용할 때에는 순서를 주의해야 한다. 로더는 오른쪽에서 왼쪽 순서로 적용된다.

 

plugin

플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다. 로더가 파일을 해석하고 변환하는 과정에 관여하는 반면에 플러그인은 번들된 결과물을 처리한다. 플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가 할 수 있다.

자주 사용하는 플러그인으로 html-webpack-plugin, clean-webpack-plugin 등이 있다.

 

 

출처

---

https://ko.javascript.info/modules-intro

https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html

https://webpack.js.org/guides/getting-started/

https://joshua1988.github.io/webpack-guide/guide.html