[Webpack] Webpack 개념 잡기 및 Quick Start

Dev/FE

[Webpack] Webpack 개념 잡기 및 Quick Start

HJChung 2021. 1. 3. 15:23

+ 더 읽어볼 거리

SPA(single page app)에서 webpack을 사용하는 이유

1. Webpack?

웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는모듈 번들러(Module Bundler)이다.

※ Module은 뭔가?

프로그래밍 관점에서의 모듈은 특정 기능을 갖는 작은 코드 단위를 의미한다. 예를들어 아래 코드가 모듈이 될 수 있겠다.

// math.js
function sum(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

const pi = 3.14;

export { sum, substract, pi }

이 math.js파일은 아래와 같이 3가지 기능을 갖고 있는 모듈인 것이다. .

두 숫자의 합을 구하는sum()함수
두 숫자의 차를 구하는substract()함수
원주율 값을 갖는pi상수

반면 웹팩에서의 모듈이라는 개념은 위에서 본 코드 단위만 모듈에 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 이미지, 폰트, html... 다-!

※ Module Bundler란 또 뭔가?

아래 그림과 같이 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 각각의 모듈로 보고 연관관계를 파악해서 하나의 파일로 조합/병합 및 압축 해주는 동작을 모듈 번들링이라고 한다.(빌드, 번들링, 변환 이 세 단어 모두 같은 의미)

그리고 이렇게 해주는 도구를 Module Bundler라고 한다

2. Webpack Quick Start

1. 빈 폴더에서 아래 명령어로package.json파일을 생성

npm init -y

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

npm i webpack webpack-cli -D 
npm i lodash

3. 가장 기본적인 웹 페이지 자원 구성

<!--getting-started/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>

<!--코드 출처: https://joshua1988.github.io/webpack-guide/getting-started.html#%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1-->

// getting-started/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());

//코드 출처: https://joshua1988.github.io/webpack-guide/getting-started.html#%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1

4. webpack 빌드를 위한 구성

웹팩 빌드 및 빌드 결과물로 실행하기 위해 소스폴더(getting-started/src/index.js) 맨 위에

import _ from 'lodash';

라는 코드가 추가되어야 한다.

그리고 getting-started/index.html도 아래와 같이 변경되어야 한다.

<!-- 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>

5. webpack 빌드

웹팩 빌드 명령어를 실행하기 위해package.json파일에 script이란는 속성에 build라는 커스텀 명령인 아래 내용 추가

"scripts": {
  "build": "webpack"
}

여기까지 했으면

//터미널
npm run build

라고 명령어를 쳐서 빌드를 해보자.

그러면 빌드가 완료되면서

getting-started 폴더 아래에 dis/main.js 가 생성되어 있을 것이다.

엇 그런데 이런 워닝이 보인다.

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

mode가 뭐길래?

3. Webpack 실행 모드 - mode

웹팩 버전 4부터 mode라는 개념이 추가되었고, mode 속성을 정의하면 웹팩의 실행모드가 그에 맞게 웹팩의 최적화기능등을 사용하도록 설정된다.

none : 모드 설정 안함 (최적화 기능 없이 빌드)
development : 개발 모드 (개발자들이 좀 더 보기 편하게 웹팩 로그나 결과물이 보여짐)
production : 배포 모드 (성능 최적화를 위해 기본적인 파일 압축 등의 빌드과정이 추가됨)

  "scripts": {
    "build": "webpack --mode=[mode설정]"
  },

4. Webpack 설정 파일

그냥 default로 했을 때는 빌드를 했을 때 dist/main.js가 생기면서 여기에 빌드된 파일이 생성되는데,

만약 특정 파일(예를 들어 public/output.js)에 빌드 내용이 들어갔으면 한다면,

  "scripts": {
    "build": "webpack
    	--mode=[mode설정]
        --entry=[빌드할 파일의 위치]
        --output=public/output.js #--output=[빌드 결과가 들어갈 파일의 위치]
        "
  },

이런식으로 계속 옵션을 추가해 줄 수 있다.

그런데 옵션이 너무 많아져도 이런식으로 계속 한 줄에 계속 적어주어야만 하는 걸까? nono 이런 경우에는 프로젝트 파일의 root level에 webpack설정파일(webpack.config.js)을 사용하는 것이 좋다!

// webpack.config.js
module.exports = (env) => {
  let entryPath = env.mode === 'production'
    ? './public/index.js'
    : './src/index.js';

  return {
    entry: entryPath,
    output: {
    	filename: '',
        path: 
    },
    // ...
  }
}

5. Webpack 변환 전/후 비교 (Webpack의 필요성)

파일 단위로 자바스크립트 모듈 관리의 필요성이 생겨서 여러 파일로 모듈화를 하는데, 서버로 요청하는 파일 숫자가 덩달아 많아지면 웹 사이트 로딩 시간이 길어지고 그러면 사용장에게 매우 안좋을 것이다.

Webpack 변환 전 index.html과 Webpack 변환 후 index.html을 실행했을 때 개발도구의 network를 보면 해당 웹페이지를 띄위기 위해 request하는 리소스를 다 볼 수 있는데. 이때 요청 횟수에 확연한 차이를 볼 수 있다.

즉 webpack을 사용하여 여러 파일을 하나로 합치고, 요청도 한번만 보낼 수 있게 된다는 장점이 있다.

또한 웹팩을 이용하면 모듈관리 뿐만 아니라 초기 페이지 로딩 속도를 높이기 위해 필요한 자원은 미리 로딩하는게 아니라 나중에 필요한 장원은 나중에 요청하자는 철학을 가지고 있다.

reference

React 개발 환경을 구축하면서 배우는 웹팩(Webpack) 기초

joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80

joshua1988.github.io/webpack-guide/advanced/mode-config.html#%EC%9B%B9%ED%8C%A9-%EC%8B%A4%ED%96%89-%EB%AA%A8%EB%93%9C-mode

'Dev > FE' 카테고리의 다른 글

[Webpack] Node.js와 NPM (0)	2021.01.01
3. CSS - 부모자식 Selector (0)	2020.04.10

현재글[Webpack] Webpack 개념 잡기 및 Quick Start

Grace's Tech Blog