Webpack의 개념이해
이 글을 시작하기에 앞서 간단하게 웹팩이 무엇인지 알아보겠습니다.
웹팩은 주로 자바스크립트 파일을 묶어서 하나의 파일로 사용하기 위함이며(번들링) 호환 플러그인들을 사용한다면 HTML, CSS 이미지와 같은 프론트엔드 자산들도 하나로 묶을수 있습니다.
그렇다면 왜 웹팩을 사용해야 할까요?
2000년대 초반까지만 하더라도 javascript 생태계는 정적인 페이지를 서버에 요청해서 브라우저에 보여주는 방식이고 문서 하나에 전달 되는 파일의 용량도 적었습니다.
그러다 점점 웹이 발전하고 고도화 됨에 따라 한 페이지에 해당하는 페이지의 용량이 커져갔고 SPA라는 새로운 패러다임이 등장하면서 javascript를 작성해야하는 코드의 규모가 늘어나게 됩니다.
자연스럽게 자바스크립트의 모듈화가 필요하게 되었고 다량의 js파일이 존재하게 되면서 이러한 파일들을 여러번 요청해야하는 문제가 생겼습니다.
또한 모듈화를 하면서 생기는 스코프, 변수들의 문제, 관리의 어려움등 여러문제들을 바탕으로 등장하게 된것이 웹팩(webpack)의 번들링 입니다.
- 파일단위의 자바스크립트 모듈 관리의 필요성
- 웹 개발 작업 자동화 도구
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
아래의 예제코드를 보면서 웹팩 이전의 javascript 방식에 대해서 살펴보겠습니다.
우선 폴더구조를 다음과 같이 만들고 아래의 코드들을 작성합니다.
<html lang="ko">
<head>
<title>Document</title>
<script src="./src/helloworld.js"></script>
<script src="./src/index.js"></script>
<!-- 사용해야하는 파일이 많을수록 늘어남 -->
<!-- 각각의 파일에서 사용하는 변수나 함수의 이름이 같을경우 예상치 못한 문제가 발생할수 있음 -->
</head>
<body></body>
</html>
// helloworld.js
function helloWorld() {
console.log("Hello world");
}
// index.js
helloWorld();
// 출력: 'Hello world'
이제 직접 웹팩을 사용해 보면서 번들링이 무엇인지 자세히 알아보겠습니다.
웹팩 설정하기에 앞서 프로젝트에 webpack 과 webpack-cli패키지를 설치합니다.
webpack-cli 는 webpack 커맨드를 실행할수 있게 해주는 커맨드라인 도구입니다.
npm init
npm install --save-dev webpack webpack-cli
웹팩이 설치가 되었다면 번들링을 하기에 앞서 모듈시스템을 이용하기 위해 코드를 조금 수정해줍니다.
// helloworld.js
function helloWorld() {
console.log("Hello world");
}
export default helloWorld;
// index.js
import helloWorld from "./helloworld";
helloWorld();
// 출력: 'Hello world'
코드를 수정후 아래의 커맨드를 실행합니다.
npx webpack
웹팩을 실행하게 되면 아래와 같이 dist라는 폴더가 생성되고 번들링된 js파일이 생성이 됩니다.
// main.js
(() => {
"use strict";
console.log("Hello world");
})();
자 이제 우리는 번들링된 js 파일을 html문서에서 사용하기만 하면 됩니다.
그러기 위해 위에서 작성한 html 코드도 조금 수정해주겠습니다.
<html lang="ko">
<head>
<title>Document</title>
<script src="./dist/main.js"></script>
</head>
<body></body>
</html>
지금까지 웹팩의 기본개념과 번들링에 대해서 알아보았습니다. 다음시간에는 webpack의 custom configuration에 대해 알아보겠습니다.
