Webpack 알아보기 01 - 기본 걔념 알아보기

Webpack 알아보기 01 - 기본 걔념 알아보기

2018, Sep 22    

Webpack 이란?

웹팩이란 자바스크립트상의 여러 종속된 모듈들을 하나의 bundle(꾸러미) 로 묶어서 하나의 파일로 배포할 수 있도록 도와주는 트렌스파일 툴 입니다. 내가 작성한 모듈 뿐만이 아니라 Npm install 을 통해 사용하고 있는 모듈들 까지도 한꺼번에 묶어주기 때문에 프론트앤드 프로그램을 개발할 때에도 좀 더 간단하게 배포할 수 있습니다.

alt text 출처 : https://webpack.js.org/


Webpack 설치

Node.js 가 설치되어 있는 상태에서 아래와 같이 webpack 을 설치합니다.

$ mkdir webpack-demo && cd webpack-demo
$ npm init -y
$ npm install webpack webpack-cli --save-dev

npm install 시에 webpack 을 global 로 설치해도 상관없지만 실무에서 사용시에는 –save-dev 로 설정해 -devDependancy 로 관리해주는 것이 좋습니다.


webpack 실행하기

먼저 webpack과 같이 트랜스파일을 하지 않는 일반적인? 웹환경을 구성한 다음, webpack 환경으로 바꾸어 보겠습니다.

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js
src/index.js

위와 같은 폴더 구성으로 index.html 파일과 /src/index.js 파일을 추가합니다.

/src/index.js

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

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

위의 예제를 보게 되면 index.js 파일은 lodash 를 암묵적으로 의존하고 있다는 것을 할 수 있습니다. index.js 파일에서 _ 로 표현된 객체가 lodash 입니다. 여기에서 몇가지 문제들이 발생할 수 있습니다.

  1. index.js 가 사용하고 있는 _ 객체가 어떤 라이브러리 인지 알아보기가 힘들다.
  2. index.html 에서 스크립트 순서가 뒤바뀌거나, 스트립트가 삭제될 경우 제대로 동작하지 않을 수 있다.
  3. _ 의 경우 global 에 종속되기 때문에 오염될 위험이 있다.

자 그럼 위와 같은 문제를 webpack을 통해 해결해 보겠습니다.

먼저 아래와 같이 lodash 를 설치합니다.

$ npm install --save lodash

설치 후 index.html 를 아래와 같이 변경합니다.

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

/src/index.js 에 lodash 모듈을 import 합니다.

import _ from 'lodash';

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

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

웹팩을 이용해 빌드하게 되면 기본적으로 소스파일과 별도로 빌드된 파일이 생성됩니다. 소스파일은 /src 폴더에, 빌드된 파일들은 /dist 폴더에서 관리되는 것이 일반적입니다. 위에서 수정한 index.html 파일을 /dist/index.html 로 이동해 주겠습니다.

마지막으로 webpack 을 이용해 빌드해 보겠습니다.

$ npx webpack

/dist 폴더를 확인해보면 main.js 란 이름으로 파일이 빌드된 것은 확인할 수 있습니다.
마지막으로 index.html 파일을 실행해 hello webpack 이 정상적으로 출력되는 것을 확인합니다.


자, 위의 빌드결과로 위의 문제점 들을 개선할 수 있었습니다.

  1. index.js 에 필요한 모듈을 명시적으로 표기함으로서 가독성이 올라감.
  2. global 이 오염되는 것을 방지.
  3. index.html 에 스크립트 태그가 변경되더라도 의존관계를 걱정할 필요가 없어짐.
Twitter Facebook Google+
# webpack