Webpack의 HMR 설정하기
Webpack의 HMR을 이용해 개발 서버 구성하기
최근 진행하는 프로젝트들이 Express를 이용하여 Front 서버를 구성하다 보니 불가피하게 Webpack HMR을 Express에 연결시켜줘야하는 상황이 생겼다. 관련을 글을 찾다보니 해외에서 2015년 11월 6일 3가지 방법에 대한 글이 나와 있어서 그 글을 보며 글을 쓰게 되었다. 번역이라기보단 해당 글을 읽고 나서 이해한 부분에 대해서 글을 쓰는 것이라 혹여라도 원문을 보고 싶다면 포스트 하단 출처에 기재해두었다.
무엇보다 Webpack의 문서는 그다지 친절하지도 않은데다가 오히려 개인 블로그에 나와져 있는 글이 더 명확하게 기재되어 있다.
The 3 Ways
Webpack HMR을 셋팅하는 것은 가장 단순한 방법에서부터 가장 복잡한 것까지 있지만, 생각보다 복잡하지는 않다. 더 어려운 부분은 셋팅을 하기 위해 어떠한 방법이 나에게 적합한지를 찾는 것이다. 요즘에는 React나 Angular, 그리고 VueJS에 이르기까지 CLI를 이용해서 개발 환경을 스케폴딩하면 모든 것이 알아서 되어 편하긴 하지만 반대로 그 안에서 커스텀을 해야하는 상황이 온다면 오히려 더 큰 어려움이 직면하는 경우가 많다. 그래서 아래의 방법 중 어떤 것이 각자의 프로젝트에 적합한지를 판단해서 적절한 방법을 찾길 바란다.
Webpack-dev-server CLI
커맨드 라인에서 webpack-dev-server를 실행시킨다. 이렇게 실행을 시키게 되면 따로 webpack.config.js 파일을 수정할 일이 없을 것이고, 가장 간단한 방법 중 하나이다. Webpack-dev-server Github 별도의 config를 설정할 필요없어 만약 제일 간단하게 셋팅할 수 있는 방법을 찾는다면 이 방법이 가장 간단할 것이다.
Webpack-dev-server API
Nodejs 자체의 스크립트에서 WebpackDevServer를 실행시킨다. 물론 webpack.config.js 파일에서 추가적인 작업은 해주어야 한다. 위에서 CLI를 이용해서 셋팅하는 것보다는 좀 더 webpack의 config에 대해서 알아야 하지만 개인적으로는 위의 방법보다는 좀 더 개발자의 입맛에 맞게 셋팅할 수 있는 방법이지 않을까라는 생각을 한다. 만약 grunt나 gulp와 같은 task runner를 사용한다거나 혹은 webpack을 개별적으로 셋팅해서 사용하고 있다면 이 방법을 쓰는 것을 추천한다.
Webpack-hot-middleware with Express
webpack-hot-middleware는 webpack dev server의 hot reloading과 Express 서버를 결합시키는 매우 유용한 툴이다. 개인적으로 찾고 있던 방법 중에 하나로서 실제 비지니스에 적합한 방법이지 않을까 싶었다. 만약 만들려고하는 어플리케이션이 Express를 이용하여 서버를 구축하려고 한다면 webpack-hot-middleware는 아주 편리한 방법이다. webpack-hot-middleware와 express를 함께 이용한다면 bundlie 시키기 위한 별도의 서버를 띄우지 않아도 될 것이다.