webpack - 웹팩 튜토리얼

장밤톨·2024년 5월 8일

웹팩이란?

최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다. 모듈 번들러란, 웹 애플리케이션을 구성하는 자원 (HTML, CSS, JavaScript, Images등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

모듈 번들링: 웹 어플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 말한다.

모듈이란?

: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 다른 모듈에서 모듈을 활용할 수도 있고, 모듈끼리 합쳐져 거대한 모듈을 만들 수도 있다. 웹팩에서의 모듈은 자바스크립트에 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다.

페이지가 렌더링 되는 과정 - 웹팩 소개영상

: 렌더링 파이프 - 일반적인 브라우저의 렌더링 과정 ⇒ 너무 오래걸린다.

→ 이를 해결하기 위해서 웹팩 도입. 웹팩은 브라우저를 위한 사전 컴파일러 도구라고 할 수 있다.

→ 웹팩은 JS만을 위한 도구가 아니라, 브라우저를 이루고 있는 모든 리소스들을 위한 것이다.

: 웹팩은 진입접 하나만 주어진다면 나머지는 알아서 해석을 한다.

웹팩이 등장하게 된 이유

파일 단위의 자바스크립트 모듈 관리의 필요성
html에서 똑같은 변수명으로 선언한 js파일을 가져오게 된다면 문제가 생길 수 있다. 그래서 파일 단위로 관리하고 싶었기에 모듈화를 하고자 했다.
웹 개발 작업 자동화 도구
파일 압축, CSS 전처리기 변환등의 일들을 자동화 해주기 위해서 등장했다.

웹 애플리케이션의 빠른 로딩 속도와 높은 성능
웹사이트의 로딩 속도를 높이기 위해서 등장했다. 브라우저에서 서버로 요청하는 파일의 숫자가 줄어들어 로딩 속도를 높일 수 있다.

웹팩은 기본적으로 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 가지고 있다.

웹팩으로 해결하려는 문제

자바스크립트 변수 유효 범위
웹팩은 변수 유효 범위의 문제점을 ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결한다.

브라우저별 HTTP 요청 숫자의 제약
TCP 스펙에 따라 브라우저에서 한 번에 서버로 보낼 수 있는 HTTP 요청 숫자는 제약되어 있다. 따라서, HTTP 요청 숫자를 줄이는 것이 웹 애플리케이션의 성능을 높여줄 뿐만 아니라 사용자가 사이트를 조작하는 시간을 앞당겨 줄 수 있다. 웹팩을 이용해 여러 개의 파일을 하나로 합치면 위와 같은 브라우저별 HTTP 요청 숫자 제약을 피할 수 있다.

사용하지 않는 코드의 관리
Dynamic Loading & Laxy Loading 미지원
Require.js와 같은 라이브러리를 쓰지 않으면 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능 했습니다. 그러나 이젠 웹팩의 Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있습니다.

웹팩 알아보기 튜토리얼 실습

웹 페이지 자원 구성하기

초기화 - 빈 폴더에서 아래 명령어로 package.json 파일을 생성

npm init -y

라이브러리 설치 - 아래 명령어로 해당 폴더에 웹팩 관련 라이브러리와 lodash 라이브러리 설치

npm i webpack webpack-cli -D //(개발용 라이브러리: -D)
npm i lodash // 유틸리티 라이브러리

렌더링 할 페이지 추가 - 폴더에 index.html 파일을 생성하고 아래 내용 추가

<html>
  <head>
    <title>Webpack Demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="src/index.js"></script>
  </body>
</html>

프로젝트 루트 레벨에 src 폴더를 생성하고 그 안에 index.js 파일 생성.

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

웹팩 빌드를 위한 구성 및 빌드 (위에 이어서)

웹팩 빌드 및 빌드 결과물로 실행하기 위해 각 파일에 아래 내용 반영

// index.js
import _ from 'lodash'; // 이 부분 추가

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  // element.innerHTML = 'Hello webpack'; 과 같음
  // 애플리케이션을 구현할 때 필요한 라이브러리를 사용한다는 의미 ( _ : lodash )

  return element;
}

document.body.appendChild(component());

<!-- index.html -->
<html>
  <head>
    <title>Webpack Demo</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- <script src="src/index.js"></script> -->
    <script src="dist/main.js"></script>
  </body>
</html>

웹팩 빌드 명령어를 실행하기 위해 package.json 파일에 아래 내용 추가

"scripts": {
  "build": "webpack --mode=none"
}

**npm run build 명령어 실행 후 index.html 파일을 라이브 서버로 실행**

: 빌드를 하고, 로그를 항상 잘 확인할 것! (--mode=none 없이 한다면 경고문 출력)

결과 파일을 변경하고 싶다면, —entry=src/index.js —output=public/(파일명).js 를 추가하면됨 (줄이 길어지면 8번 참고)

웹팩 설정 파일 추가 - 프로젝트 폴더 루트 레벨에 webpack.config.js 파일 생성 후 아래 내용 추가

// webpack.config.js
// `webpack` command will pick up this config setup by default

// common js의 'path' 라이브러리를 가져오기
var path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};