아직 부족한 부분이 많은 포스트입니다. 제가 프로젝트를 진행하면서 겪었던 내용과, Dev-Server 설정을 번역한 부분을 함께 포스팅하겠습니다.
Webpack Dev Server
webpack -devServer는 webpack에세 제공해주는 node server다. webpack을 이용해 번들링을 미리 해두고 있다면, 코드가 수정될 때마다 서버를 멈추고 빌드를 진행하고 다시 서버를 켜야 변경사항을 확인 할 수 있다.
이러한 작업이 매우 번거롭기 때문에 webpack은 개발용 서버를 제공한다. 일종의 "웹서버"를 node 위에서 동작시키는 것이다. webpack에서 제공하는 개발용 서버를 실행시키기 위해선 webpack-dev-serve --open 명령어를 터미널에 입력하면 된다. 웹서버이기 때문에 localhost:80으로 접근하게 된다.
추측 :
webpack devServer는 node에서 express.static과 같은 역할을 해준다고 생각하면 된다.
webpack-dev-serve명령어는 코드가 변경되면 자동으로 빌드하여 다시 서버를 구동하는 작업을 자동으로 해준다. 프론트용 nodemon으로 여기자.
동작
- 서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시
- 소스 파일이 변경되면 변경된 모듈만 새로 번들링
- 변경된 모듈 정보를 브라우저에 전송
- 브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드
설정
npm i webpack-dev-server -D
webpack devServer를 이용하기위해선 당연히, webpack config 파일 건드려야 된다.
webpack devServer를 위한 옵션이 devServer다.
devServer : {
contentBase : path.join(__dirname, 'dist'),
inline : true,
hot : true,
host : 'localhost',
compress: true,
port: 9000
},devServer object의 속성값으로 넣어줄 수 있는 것은 다음과 같다.
- host 호스트 지정
- contentBase 브라우저에 제공할 정적파일들이 담긴 경로
- compress 모든 항목에 대해 gzip을 사용할 것인가.
- hot webpack의 HMR 기능 활성화
- inline inline 모드 활성화
- port 접속포트 설정
webpack-dev-serve 명령어와 webpack 명령어의 차이
webpack 명령어는 엔트리부터 파일(모듈)을 탐색한다. 탐색 도중에는 확장자에 맞는 로더를 실행시켜 js파일로 변환한다. 이렇게 번들링된 파일은 webpack.config에 명시된 output 경로에 생성된다.
webpack-dev-serve 명령어도 엔트리부터 번들링을 시작하고 로더를 적용하는 것은 똑같다. 그러나 번들링 된 파일을 생성하지는 않는다. 번들링된 결과물을 메모리에 저장하고, 메모리에 저장된 번들을 브라우저에 바로 넘겨주는 방식이다.
따라서 dist(output으로 지정한) 경로에 위치한 파일을 변경하여도, devServer가 보여주는 코드나 html에는 변경사항이 적용되지 않는다.
webpack dev serve 명령어는, 번들링 대상 파일이 변경되면 , 처음부터 번들링을 새로 시작하는 것이 아니라, 변경된 파일만 번들링하여 기존의 번들에 합친다.
근데 왜 devServer 옵션에 contentBase가 필요한가?
When using webpack-dev-server, it builds all files internally and does not spit them out into your output path. Running webpack alone, without the dev server, does the actual compilation to disk. The dev server does everything in memory which speeds up re-compilation by a lot.
각각의 파일들은 메타데이터로 어느 디렉토리에 위치해있는 지 알 수 있다.
devServer의 contentBase 옵션은 번들링된 정적파일들을 담고 있는 디렉토리의 위치를 명시하는 것이다. devServer는 명시한 디렉토리를 브라우저에 띄워준다.(contentBase를 명시해주지 않으면, 현재 위치한 디렉토리 전체를 메모리에 로드하여 serve하게 된다. )
webpack-dev-server는 번들 대상 파일의 변경이 있을 경우, 다시 번들링하여 메모리에 올린다. 그리고, "메모리에 로드된 상태"를 기준으로 dist 디렉토리에 속한 파일들을 브라우저로 제공한다.
dist 파일의 index.html을 변경하더라도, dist 파일은 하드디스크에 있는 것이므로, webpack-devServer가 서빙하는 대상이 아니다. 또, dist 디렉토리의 내부 파일들은 번들링 대상이 아니기 때문에, 다시 빌드가 되지 않고, 메모리에 변경사항이 로드되지 않는다.
뇌피셜 가미한 결론으로 devServer에 contentBase 옵션은 어떻게보면, 메모리의 논리주소를 명시하는 것이 아닌가싶다. 따라서 실제 파일에는 dev-server의 결과물이 생성되지는 않는..
