webpack 두렵지 않아요 - webpack-dev-server

webpack 설정에 대해서는 정리를 완료했다.
모든 설정을 다루진 않았지만, 핵심적인 내용은 다 다루었다.
마지막으로 webpack-dev-server를 정리하고 마무리하겠다.

webpack-dev-server란?

webpack 명령어를 통해 build를 하고 bundling된 파일들을 확인할 수 있었다.
그런데 코드가 수정될 때마다 build를 해야하는 것은 너무 수고롭다.
또한 build가 파일 레벨에서 진행되다보니까 파일이 커질수록 느리다.

webpack-dev-server

• 개발 환경에서 파일이 변경되면 자동으로 빌드하고 새로고침해준다.
• 파일을 직접 만들지 않고, 메모리상에서 빌드하여 빌드시간을 줄여준다.
• 실제 배포시에는 파일로 build파일을 만들어야 한다.

설치하여 사용해보자.

npm install -D webpack-dev-server

package.json 을 아래와 같이 변경해준다.

"scripts": {
 	"dev": "webpack-dev-server" 
}

아래 스크립트로 실행시키면
/dist 하위로 파일이 생성되지는 않지만
번들링되어 브라우저에 렌더링 된다.

npm run dev

---

webpack 두렵지 않아요 - 끝 -
다음은 rollup에 대해서 알아볼 예정이다.