WebPack5 #2 - 번들링 셋팅

안녕하세요.

도서관 갔다가 휴관으로 집으로 다시 돌아온 하프입니다. 🥹

이번에는 번들링을 하기 위한 초기 셋팅을 해보려고 합니다.

프로젝트 셋팅

라이브러리 설치

cmd 터미널에서 진행해주시면 됩니다.

mkdir webpack-demo
cd webpack-demo

npm init -y
npm install webpack webpack-cli --save-dev
npm install --save lodash

VSCode 플로그인 설정

번들링 된것을 실행하기 위해서는 VSCode에서 Live Server라는 플로그인이 필요합니다.

설치하게 되면 오른쪽 하단에 Go Live 라고 하나가 생깁니다.

이 버튼을 누르게 되면, 현재 경로에 서버가 켜진다고 보시면 됩니다.

폴더 구조 생성

다음과 같이 프로젝트를 셋팅해줍니다.

  📁 webpack-demo
  |- 📜 package.json
  |- 📜 package-lock.json
  |- 📁 dist
      |- 📜 index.html
  |- 📁 src
      |- 📜 index.js
  |- 📜 webpack.config.js

그리고 다음과 같이 파일을 작성합니다.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./main.js"></script>
  </body>
</html>

index.js

import _ from 'lodash';

function component() {
    const element = document.createElement('div');
  
    // 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  
    return element;
  }
  
  document.body.appendChild(component());

webpack.config.js

const path = require('path');

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

명령어 입력

npm run build

npm run build를 실행하게 되면, dist 폴더 안에 main.js가 생성됩니다.

그리고 index.html은 생성된 main.js를 참조 합니다.

Go Live 클릭

Go Live를 눌러 서버를 실행시켜 주고, /dist/index.html의 경로로 이동해주면

Hello Webapck 이라는 문구가 뜰 것 입니다.

부연 설명

실행이 되는건 알겠는데, 왜? 어떤 원리로? 실행되는지를 알아봐야 합니다.

1. /src/index.js

우선 첫 번째로 봐야할것은 /src/index.js 입니다.

import _ from 'lodash';

function component() {
    const element = document.createElement('div');
  
    // 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  
    return element;
  }
  
  document.body.appendChild(component());

코드 자체는 어려울것이 없습니다.

div를 새롭게 하나 만들어주고, lodash 라이브러리를 이용하여, 문자열을 합쳐주고 body에다가 추가를 해준다고 보면 됩니다.

lodash를 사용하는 이유는, 코드에서 사용된 라이브러리는 어떻게 번들링이 되는지를 알기 위해서 입니다.

2. webpack.config.js

두 번째로 봐야할것은 webpack.config.js 입니다.

코드를 봅시다.

전 글에서도 보다시피 entry는 webpack이 내부의 참조하고자 하는 파일들을 생성할 때 사용해야 하는 모듈입니다.

즉, /src/index.js이 파일을 번들링하여 ,dist폴더 안에 main.js로 파일을 내보내겠다는 뜻 입니다.

index.js안에는 lodash 라이브러리를 사용했다면, main.js는 이를 사용하기 위해 라이브러리를 압축을 해야할 것 입니다.

main.js를 보게 되면 실제로도 압축하여 사용합니다.

3. index.html

마지막으로 index.html을 살펴보게 되면 번들링 된 main.js를 참조하여 화면에 뿌려준다고 보면 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./main.js"></script>
  </body>
</html>

다음에는 다양한 파일들(css, ttf, xml ...)을 webpack에서 참조할 수 있도록 설정해보겠습니다.

'프론트엔드 > 기타' 카테고리의 다른 글

WebPack5 #3 - 파일 로딩 (0)	2024.06.16
WebPack5 #1 - 핵심 내용 (0)	2024.06.14