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 -Dyarn
yarn init -y
yarn add webpack webpack-cli --devinit -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=developmenthtml에서 JS파일을 불러오는 이유는 뭘까? 우리는 cli를 통해 index.js를 ../dist/bundle.js로 빌드한 것이다. 때문에 처음엔 index.js가 존재하지않지만 빌드 후 생성될 bundle.js를 호출한 것이다.
