1. webpack이란?
1. html, css, javascript로 작성한 front-end 환경을 보다 압축된 환경으로 bundling 해줍니다.
2. front-end에 최적화되어 있습니다.
3. 각기 다른 환경(ex. vanilla js, vue, react)에서 작업한 front-end 환경을 하나의 동일한 output으로 변환해 줍니다.
4. gulp라는 단일화된 환경이 있다면, webpack은 workflow를 변경할 수 있는 다양한 option들을 제공합니다.
5. 그만큼 러닝커브 및 초기 진입이 어렵습니다. 매우 다양한 option들을 제공하며, 그에 따른 side effect가 발생합니다.
gulp와 차이
1. gulp가 작업 중 편리한 환경을 위한다면, webpack은 작업 완료 후, 번들링에 중점을 두고 있습니다.
1) 공통점 :
- html, css, js를 수정하고, 동시에 dist에 번들링 됩니다.
- 작업 파일을 수정하면 브라우저에 바로바로 반영 됩니다.
2) 차이점 :
- 작업 환경에서 html, css, js, image를 추가, 삭제하면 dist에 바로바로 반영되고, 안되고 차이가 있습니다.
- gulp가 정해진 기능을 구현하는 방식이라면, webpack은 원하는 기능을 구현하는 방식입니다.
3) gulp
- 목적: html, css, js를 수정하고, 동시에 dist에 번들링 되고, 브라우저에 바로바로 반영됩니다.
- 작업 환경에서 모든 파일(html, css, js, image)을 추가, 삭제하면 dist에 바로바로 반영됩니다.
- 브라우저의 url로 같은 wifi 환경에서, 같은 url로 핸드폰에서 볼 수 있습니다.
4) webpack
- 목적: 작업 완료된 파일을 dist에 번들링 합니다.
- 작업 완료 후 번들링 이기 때문에, 어떤 파일을 번들링 할지 지정합니다.
express 연동
1. express 연동 시 webpack-dev-server에 의존적입니다.
2. nodemon을 사용할 수 없습니다.
3. webpack watch와 webpack serve를 실행한 후 server.js를 실행시켜야 합니다.
4. webpack-dev-server에서 proxy로 server.js(express) server를 연결해 주어야 합니다.
사념
처음 vue-cli를 접했을 때, vue파일을 수정할 경우, 브라우저에서 자동으로 변경되는 모습이 매우 흥미로웠습니다. 어떠한 설정으로 reload가 수행되는지에 대한 고민을 거듭하면서, 같은 환경을 쌩 html, css, js환경에서 구현해 보고 싶었습니다.
그 과정에서 gulp와 webpack을 알게 되었고, file system과 express, 그리고 css, js파일들의 loader에 대한 고찰이 필요했습니다. webpack으로 gulp와 동일한 환경을 만들려 했고, 구현도 했으나, webpack 자체가 작업 완료 후 번들링에 목적을 두고 있어 무리한 작업환경 설정이 필요한가 싶었습니다.