지금까지는 HTML, CSS, JavaScript 등 파일을 브라우저에 직접 로딩해서 결과물을 확인했다.
인터넷에 웹사이트를 게시하려면 서버 프로그램으로 이 파일을 읽고 요청한 클라이언트에게 제공해야 한다.
개발환경에서도 이와 유사한 환경을 갖추는 것이 좋다.
운영환경과 맞춤으로써 배포시에 잠재적인 문제를 예방할 수 있기 때문이다.
프론트엔드 개발환경에서 이러한 개발용 서버를 제공해주는 것이 webpack-dev-server이다
패키지 설치 및 사용
우선 webpack-dev-server 패키지를 설치한다
$ npm install -D webpack-dev-server그리고 package.json에서 스크립트를 하나 등록한다
package.json
{
"scripts": {
"start": "webpack serve --open --mode=development --hot --progress"
}
}
webpack5로 버전 업그레이드 되면서 기존에 webpack-server-dev 대신 webpack serve명령어로 실행해야 한다
progress는 서버가 실행될 때 진행 상태를 퍼센테이지로 확인할 수 있다
open은 개발 서버가 실행될 때 브라우저를 자동으로 띄워준다
개발용 서버이므로 mode를 development로 설정한다
hot은 코드가 변경될 때마다 자동으로 변경사항을 브라우저에 반영한다
(사실 webpack-dev-server v3부터 HMR을 기본으로 제공해서 안써도 된다)
이제 npm start 명령어를 입력해 개발 서버를 실행할 수 있다
기본 설정
웹팩 설정 파일의 devServer 객체에 개발 서버 옵션을 설정할 수 있다.
webpack.config.json
module.exports = {
devServer: {
devMiddleware: {
publicPath: "/",
},
static: {
directory: path.resolve(__dirname, "./dist"),
},
host: "dev.domain.com",
port: 9000,
historyApiFallback: true,
},
}webpack-dev-server v4부터 옵션명이 바뀐것이 여러개 있다..
devMiddleware.publicPath: 브라우저를 통해 접근하는 경로. 기본값은 '/' 이다.
static.directory: 정적파일을 제공할 경로. 기본값이 public으로 설정되어 있다. staic옵션을 객체로 사용하면 정적 파일과 관련된 다른 세부 옵션들을 설정할 수 있다. 이 때 정적 파일의 디렉토리는 directory 옵션으로 변경된다.
host: 개발환경에서 도메인을 맞추어야 하는 상황에서 사용한다. 예를들어 쿠기 기반의 인증은 인증 서버와 동일한 도메인으로 개발환경을 맞추어야 한다. 운영체제의 호스트 파일에 해당 도메인과 127.0.0.1 연결한 추가한 뒤 host 속성에 도메인을 설정해서 사용한다.
port: 개발 서버 포트 번호를 설정한다. 기본값은 8080.
historyApiFallBack: 히스토리 API를 사용하는 SPA 개발시 설정한다. 404가 발생하면 index.html로 리다이렉트한다.
이외에도 공식문서에서 다양한 옵션을 확인할 수 있다.
참고자료: https://jjnooys.medium.com/webpack-webpack-dev-server-v4-0-0-de24d4e8ee9d
https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard
