[Frontend / Build Tool] Webpack이란? (개념 및 설치 방법)

Build Tool?

웹, 앱 프로그래밍 개발의 발전과 함께 필요한 라이브러리도 많아졌다. 라이브러리들을 직접 다운받아 추가해 사용하는 방법도 있지만 그럼 번거롭게 되므로 이를 위해 만들어진 것이 빌드 도구(Build Tool)이다.

소스 코드를 컴파일, 테스트, 정적분석하여 실행 가능한 애플리케이션으로 자동 생성하는 프로그램
계속해서 늘어나는 라이브러리 자동 추가 및 관리
프로젝트를 진행하며 시간이 지남에 따라 라이브러리 버전을 자동 동기화
Frontend Tool로 npm., Yarn, Gulp, Webpack, Browserify, Grunt 등이 있음

Webpack을 사용하는 이유?

많이 사용하는 툴은 Gulp, Grunt, Webpack이 있는데 그 중 webpack을 사용하는 이유는 프로젝트 규모가 커짐에 따라 종속성 관리가 중요하기 때문인 것 같다.🤔 Webpack은 자바스크립트 애플리케이션을 위한 Package Bundler이고 종속성을 가진 애플리케이션 모듈을 정적인 소스들로 생산하는 것이 목적이다. 필요한 모든 모듈을 종속성 그래프로 반복 작성한 다음 브라우저에서 로드할 수 있는 하나의 Bundle로 패키지화 한다.

Loader를 통해 Javascript, Image file, Font, CSS, SCSS 등과 같은 자산을 하나의 모듈로 취급
Entry 별로 Bundle 생성 가능
Bundle에 대한 압축 및 난독화, 소스 맵에 대한 옵션을 제공
Plug-In 사용을 통한 사용자 정의 기능 수행
비동기 I/O와 다중 캐시 레벨을 사용하기 때문에 컴파일 속도가 매우 빠름
CommonJS(nodejs)와 AMD(requires) 스펙 지원

Webpack !!

webpack은 크게 네 가지로 나눌 수 있다.

Entry : Webpack은 모든 애플리케이션에 대한 종속성 그래프를 작성하며 그래프의 시작점을 Entry Point라고 한다. 이 Entry Point를 통해 모듈이 어디서부터 시작하는지를 명세하는 애플리케이션을 시작하는 첫 번째 파일로 나타낼 수 있다.
Output : Output은 모든 애플리케이션의 자산(resources 또는 assets)을 하나의 Bundle로 묶었으면 해당 Bundle을 처리하는 방법을 명세한다.
Loader : Loader는 사전에 처리할 작업을 나타내며 css, html, jpg, scss 등의 자산을 하나의 모듈로 취급하며 이러한 파일들을 종속성 그래프에 추가할 때 모듈로 변환한다.
Plug-In : Plug-In은 일반적인 Compile 또는 모듈 처리에 필요한 작업 및 사용자 정의 기능을 수행하는데 사용한다.

설치 및 Build 해보기

설치과정

npm이나 yarn으로 webpack 설치가 가능하다. webpack4부터 cli를 같이 설치해줘야 한다고 한다.

-D는 개발자 전용(?)으로 설치, -g는 경로 상관없이 설치가능하다.

npm

npm init -y
npm install webpack webpack-cli -D

yarn

yarn init -y
yarn add webpack webpack-cli --dev

init -y를 통해 package.json을 만들고 npm install 명령으로 설치와 동시에 package.json에 적용한다.

나는 이대로 했는데도 오류가 뜨면서 npm audit을 요구하길래 기존에 있던 package.json 파일을 아예 지우고 했더니 잘 실행이 됐다.

이유는 아직 모르겠다..ㅠㅠ

Cli를 사용해 Build

webpack cli 를 통해 자바스크립트를 빌드해보기 위해 index.js, index.html 을 생성한다.

webpack4에선 기본 경로가 src로 되어있기 때문에 src 경로가 존재해야한다.

src/index.js

function component() {
	const element = document.createElement("div");
    
    element.textContent = "Hello world!";
    
    return element;
}

document.body.appendChild(component());

src/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
<script type="text/javascript" src="../dist/bundle.js"></script>
</body>
</html>

일단 build 해보자!

webpack --output sidt/bundle.js --mode=development

html에서 JS파일을 불러오는 이유는 뭘까? 우리는 cli를 통해 index.js를 ../dist/bundle.js로 빌드한 것이다. 때문에 처음엔 index.js가 존재하지않지만 빌드 후 생성될 bundle.js를 호출한 것이다.

저작자표시 비영리 변경금지