웹팩에 대해 알아보자!

안녕하세요. 휴먼스케이프 개발팀 인턴 Eunice입니다.
이번 글에서는 webpack에 대한 설명을 해드리겠습니다.

왜 webpack을 사용할까요?

webpack이 나오기 전에 Grunt 와 Gulp가 있었습니다. Grunt와 Gulp는 task runner (자동화 툴) 입니다. 보통 CSS와 javascript 파일을 concat, minify, compress, uglify 등을 하는데 쓰입니다.

*Minifying is just removing unnecessary white-space and redundant like comments and semicolons. And it can be reversed back when needed.

*Uglifying is transforming the code into an “unreadable” form by changing variable names, function names, etc, to hide the original content. Once it is used there’s no way to reverse it back.

Gulp, Grunt와 다르게 webpack은 module bundler 입니다. task runner 와 module bundler 는 뭐가 다를까요?

module bundler는 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리를 말합니다. 모듈 번들러는 여러개의 자바스크립트 파일을 하나의 파일로 묶어서 한 번에 요청을 통해 가지고 올 수 있게 하고 최신 자바스크립트 문법을 브라우저에서 사용할 수 있게 해줍니다.
또 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있습니다.

Webpack은 Browserify와 같은 의존성 관리 기능까지 포함하고 있습니다. 즉, “webpack = (Grunt||Gulp) + Browserify” 가 되는것 입니다.

Browserfy는 브라우저 사이드에서 node js의 모듈처럼 쓸수 있도록 해줍니다. 즉, 브라우저에서 require() 을 쓸 수 있도록 해주는 것이죠.

그러면 이제 웹팩을 써봅시다!

webpack의 주요 개념

웹팩에 주요 개념으로는 4가지가 있습니다.

- 엔트리
- 아웃풋
- 로더
- 플러그인

하나씩 알아보도록 합니다.

1. Entry

위에서 웹팩은 모듈 번들러라고 말했습니다. entry는 모듈의 의존성 그래프에서 시작점이 되는 것을 엔트리라고 합니다.

웹팩은 엔트리를 통해 필요한 모듈을 로딩하고 하나의 파일로 묶어줍니다.

webpack.config.js

entry값의 default value는 ./src/index.js 입니다. webpack.config.js 에서 entry 값을 설정해 줄 수 있습니다.

2. Output

아웃풋은 위에 엔트리에서 번들된 파일을 기록합니다.

3. Loader

웹팩은 모든 파일을 모듈로 관리하는데 자바스크립트만 이해할 수 있습니다. 그래서 자바스크립트가 아닌 파일을 웹팩이 이해할 수 있도록 변환해야하는데 로더가 그 일을 해줍니다.

Loader에는 두개 속성이 있습니다. test 와 use 입니다.
- test에는 변환할 파일을 지정해주고
- use 에는 어떤 로더를 사용할지 지정합니다.

위 예시에서는 babel-loader를 사용했습니다. babel-loader는 최신 자바스크립트 문법을 ES5버전에서도 돌아갈 수 있도록 변환합니다.

babel-loader 이외에도 css 코드를 자바스크립트 파일로 변환하기 위해 css-loader, style-loader를 사용합니다.

4. plugins

로더가 모듈 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리합니다.

위 코드에서는 HtmlWebpackPlugin을 사용했습니다.
따로 분리하여 bundle한 css파일과 js파일을 각각 html 파일에 link 태그와 script태그로 추가해줘야 합니다. 플러그인을 사용하기 위해서는 npm 을 통해서 설치를 해주어야 합니다.
HtmlWebpackPlugin 외에도 여러가지 플러그인들이 있습니다.

웹팩에 대해서 정리해 보았습니다. 조금 아시겠나요?
웹팩 이외에도 Grunt와 Gulp에 대해서 알고싶다면 아래 참고에 나온 사이트를 이용해 주세요!

감사합니다.

[출처/참고]

• https://stackoverflow.com/questions/33708197/does-it-make-sense-to-do-both-minify-and-uglify?rq=1
• https://fullest-sway.me/blog/2017/03/29/tool-each/
• https://velog.io/@jeff0720/React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-Webpack-%EA%B8%B0%EC%B4%88
• http://jeonghwan-kim.github.io/js/2017/05/15/webpack.html
• https://webpack.js.org/concepts/
• https://www.zerocho.com/category/Webpack/post/58aa916d745ca90018e5301d

Get to know us better!
Join our official channels below.

Telegram(EN) : t.me/Humanscape
KakaoTalk(KR) : open.kakao.com/o/gqbUQEM
Website : humanscape.io
Medium : medium.com/humanscape-ico
Facebook : www.facebook.com/humanscape
Twitter : twitter.com/Humanscape_io
Reddit : https://www.reddit.com/r/Humanscape_official
Bitcointalk announcement : https://bit.ly/2rVsP4T
Email : support@humanscape.io