[Webpack] webpack5로 webpack-dev-server 사용하기

유데미 강의를 보며 typescript에 webpack을 적용하였다.

하지만 강의는 webpack 4버전으로 녹화된 강의였고.. 

나는 webpack5로 설정을 하던중 다른 부분이 있어 기록으로 남길겸 글을 남기게 되었다.

 

webpack-dev-server ?

빠른 실시간 리로드 기능을 갖춘 개발 서버로서

디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라지고,

webpack.config.js파일에 devServer 옵션으로 커스터마이징도 가능하다.

 

22년 3월 기준 npm install 버전과 나의 프로젝트 구성 목록이다.

 

npm start로 실행했을 시에는 webpack-dev-server가 실행되게 하고,

build시에는 따로 build용 config 파일을 만들어 적용해주었다.

(webpack 4버전에서는 "webpack-dev-server" 를 사용하여 실행하였지만, 5버전에서는 "webpack server" 명령어로 서버를 실행할 수 있다.)

 

npm start시 실행되는 개발서버에 대한 config 파일을 살펴보면

왼쪽은 webpack 4 오른쪽은  webpack 5

4버전에서는 devServer에 대한 설정을 명시하지 않아도 자동으로 서버가 index.html

파일을 찾아 실행하였지만

5버전에서는 Cannot get/ 에러가 발생하고 index.html 파일을 찾지 못하여서 따로 devServer 설정을 했다.

 

webpack-dev-server는 기본적으로 번들링 된 파일을 생성하지 않으므로 번들링된 결과물을 메모리에 저장하고, 메모리에 저장된 번들을 브라우저에 넘겨주는 방식이다.

따로 output으로 dist 경로에 추출한 파일을 변경하여도, decServer에 변경사항이 적용되지 않는다.

 

하지만 pulicPath를 지정해서 기본적으로 메모리상에 있을 dist폴더를 만들고 참조가 가능하다.

결과적으로 dist 폴더에 bundle.js라는 파일명으로 번들링시키고,

indexl.html 파일에서 bundle.js 파일을 참조하면된다.

<script type="module" src="/dist/bundle.js"></script>

이제 터미널에서 npm run start 명령어 실행후 localhost:8080 포트로 접속하면 내가 원하는대로 페이지가 뜬다.

 

production용 webpack config 파일은 약간 다르다.

왼쪽은 webpack 4 오른쪽은  webpack 5

4버전에서는 컴파일시 dist 폴더를 초기화 하기위해 따로 플러그인을 설정하였지만 5버전에서는 output에 바로 설정할 수 있었다. 

 

config 설정을 저장하고 npm run build 를 실행하면 

dist 폴더에 직접 bundle.js 파일이 생성되니 눈으로 확인할 수 있다.

이제 루트폴더에 있는 index.html 을 라이브서버로 실행하면 페이지가 잘 출력된다.