webpack 개념과 사용방법

안녕하세요.

오늘은 webpack의 개념과 사용방법에 대해서 간단하게 알아보도록 하겠습니다.

서버에서 처리하는 로직을 JavaScript로 구현하는 부분이 많아지면서 웹 서비스 개발에서 JavaScript로 작성하는 코드의 양도 늘어났습니다. 코드의 양이 많아지면 코드의 유지와 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요해집니다. 그러나 JavaScript는 언어 자체가 지원하는 모듈 시스템이 없습니다. 이런 한계를 극복하려 여러 가지 도구를 활용하는데 그 도구 가운데 하나가 webpack입니다.

webpack이란?

• 웹팩은 모듈 번들러 입니다. 
• 웹팩은 상호 의존성이 있는 모듈들을 사용해 그 모듈들과 같은 역할을 하는 정적 에셋들을 생성해냅니다.
  
  

webpack 동작방식

1. 각 기능 단위별로 module을 정의합니다.
2. module을 로딩합니다.

3. module로 만들어진 파일을 웹브라우저에서 사용 가능하도록 컴파일(bundling)합니다.
   이때, module을 웹브라우저에서 사용할 수 있도록 컴파일하는 역할을 webpack이 합니다.
   (webpack에서 컴파일은 엔트리 파일을 시작으로 의존 관계에 있는 모듈을 엮어서 하나의 번들 파일을 만드는 작업입니다.)
   
   

   
   컴파일 과정1
   
   

   

   컴파일 과정2

webpack 설치 및 사용방법
(webpack은 기본적으로 node.js가 설치된 환경에서 실행됩니다. node.js는 설치가 되있다고 가정하고 설명합니다.)

• npm 명령어를 사용하여 설치합니다.
  $ npm i webpack -g
  
  
• webpack {엔트리파일 경로} {번들파일 경로} 형식으로 module을 컴파일 합니다.
  $ webpack .index.js bundle.js
  
  
• 컴파일 명령어에 --watch 옵션을 사용하면 모듈 파일이 변경될 때마다 변경된 모듈을 자동으로 다시 컴파일합니다.
  $ webpack --watch .index.js bundle.js
  
  
• entry 파일이 많을 경우, 설정파일(webpack.config.js)을 사용하여 한번에 컴파일 합니다.
  
  
  
  
  
• webpack.config.js 파일을 생성하였을 경우 아래와 같이 실행합니다.
  $ webpack 또는 $ webpack --watch

webpack 로더

• webpack의 로더는 다양한 리소스를 JavaScript에서 바로 사용할 수 있는 형태로 로딩하는 기능이다. 로더는 webpack의 특징적인 기능이면서 webpack을 강력한 도구로 만드는 기능입니다.
  
  
  컴파일 과정3 (loader 포함)
  
  
• 템플릿 함수, json-loader 등 다양한 로더를 사용할 수 있습니다.
  
  
  
  
  

webpack의 특징

• code splitting
  - 거대한 클라이언트 사이드 자바스크립트를 여러 파일로 나눠 쓸 수 있게 해 준다. 
  
  
• javascript/css preprocessing
  - SASS나 LESS 등의 CSS preprocessor는 물론, CoffeeScript, LiveScript 등의 compile-to-javascript 들도 설정만 잘 해 놓으면 webpack build 커맨드 하나로 빌드할 수 있다.
  
  
• long term caching
  - Webpack은 파일 내용에 종속적인 해시값을 파일 이름 뒤에 덧붙임으로서 이런 장기 캐싱을 도울 수 있다.
  
  
• hot reloading
  - 서버가 돌아가는 중에 코드에 변경 사항이 생길 때마다 그 변경사항을 즉각 반영이 가능하다.
  
  
• javascript 빌드 도구인 gulp와 grunt와 연동도 가능하다.
  - grunt-webpack
  - gulp-webpack
  (webpack이 제공하는 빌드 기능(압축, 난독화, 소스 파일 병합)만으로도 충분하다면 빌드 도구와 연동하지 않고 webpack만 단독으로 사용해도 됩니다.)
  
  

webpack 예제코드

• app.js, bar.js, webpack.config.js, page.html 파일을 각각 생성합니다.
• 생성 후, 아래와 같이 내용을 입력합니다.
  
  
• bar.js에 테스트 코드를 입력합니다.
  - example) alert('hello world');  //웹브라우저 오픈시 alert 창을 띄우는 코드
  
  
• 아래 명령어를 사용하여 webpack을 실행합니다.
  - $ webpack
  
  
• bundle.js 파일을 생성된 것을 확인 후, page.html 파일을 오픈하면 alert 창이 뜨는 것을 확인하실 수 있습니다.

참조

• javascript 모듈화 도구, webpack, http://d2.naver.com/helloworld/0239818
• 웹팩 공식 사이트, https://webpack.js.org/
• 웹팩 시작하기, https://webpack.js.org/guides/getting-started/

간단하게 webpack에 대해서 알아보았습니다.

모두 즐거운 코딩하세요~