webpack-dev-server 사용하기(=삽질후기)

adam2·2019년 11월 2일

webpack webpack dev server 데브 서버 웹팩 웹팩 사용법 웹팩 서버 웹팩 설정

⚠️에러사전⚠️

목록 보기

1/4

프론트에서 js모듈화를 진행하기 위해 babel과 webpack을 적용하였다.

ES6 최신문법을 브라우저에서도 사용하기 위해서 babel을 적용하고,

그걸 하나로 뭉쳐주기 위해(?) webpack을 적용하였다.

그렇게 한 결과 html 뷰에서 webpack으로 뭉친 bundle.js하나만 로드해주면 모든 것이 한방에 해결되는 신세계와 편리함을 맛볼 수 있었다!

오우예!

하지만 webpack을 대충 공부하고 적용한 탓에 여태까지는 그저 ~파일간의 의존성같은 부분을 해결해 주는 정도~라고만 생각했는데 많은 기능이 있었다.

그중 하나가 바로 webpack-dev-server 이다.

이걸 알기 전까진 webpack을 돌린 후에 html파일은 따로 vscode extention liveserver로 따로 html을 서버에 띄워 테스트를 하였다. 그런데 heroku에 이 프론트 서버를 배포해야 할 일이 생겨서 관련 자료를 찾아보던 중 발견하게 되었다...

webpack-dev-server란?

webpack-dev-server는 빠른 실시간 리로드 기능을 갖춘 개발 서버로,

디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라짐
webpack.config.js에도 devServer 옵션을 통해 옵션을 지정하여 사용이 가능

webpack-dev-server의 동작원리

서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시
소스 파일이 변경되면 변경된 모듈만 새로 번들링
변경된 모듈 정보를 브라우저에 전송
브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드

이미 webpack을 사용하고 있었기 때문에 나는 webpack-dev-server만 추가로 설치하고 config만 수정해주면 됐었다.

npm i webpack-dev-server -D

// webpack.config.js
devServer: {
        contentBase: __dirname + "/dist/",
        inline: true,
        hot: true,
        host: "localhost",
        port: 5500
    },

devServer 속성값

속성명	description	CLI 사용
host	사용될 호스트 지정	webpack-dev-server –host 127.0.0.1
contentBase	콘텐츠를 제공할 경로지정 (정적파일을 제공하려는 경우에만 필요)	webpack-dev-server –content-base /path/to/content/dir
compress	모든 항목에 대해 gzip압축 사용	webpack-dev-server –compress
hot	webpack의 HMR 기능 활성화	-
inline	inline 모드 활성화	webpack-dev-server –inline=true
port	접속 포트 설정	webpack-dev-server –port 9000
open	dev server 구동 후 브라우저 열기	webpack-dev-server –open

속성값들은 id값만 봐도 대충 감이 오는 정도라 자세한 설명은 패스!

명령어

webpack-dev-server --open

대부분의 검색한 글들에서는 이정도 설정으로 바로 서버가 띄워지면서 화면이 나왔는데 난 그러지 않았다....

일단 나의 디렉토리 구조는 이랬다.

front-end
├── bundle.js
├── bundle.js.map
├── dist
├── index.html
├── login.css
└── src

보통은 dist폴더 하위에 웹팩 파일을 넣지만 나는 root디렉토리에 파일을 생성하였다.

spa구조로 화면을 만들었기 때문에 index.html파일 하나 뿐이며 이 또한 root디렉토리에 생성하였다. 나머지 js 파일과 뷰파일은 src에 저장되어 있다.

내가 삽질을 하게 된 이유는

config파일의 output.publicPath 설정을 해주지 않았기 때문!

publicPath는 브라우저에서 url형태로 접근할 경로를 설정해준다. 나같은 경우 front-end폴더에 html파일과 bundle.js파일이 있었기 때문에 publicPath: "/front-end/" 로 설정해주었다.

깃헙 이슈: https://github.com/webpack/webpack-dev-server/issues/24

2. devServer.contentBase 등의 디렉토리 설정

devServer.contentBase도 __dirname + "/dist/" 에서 path.join(__dirname + "/front-end/") 으로 변경해주었다.

그 후 package.json에서 스크립트 설정을 해주었다.

"scripts": {
        "build": "webpack -w",
        "dev-server": "webpack-dev-server --open"
    },

잠깐만~ why webpack?

Webpack을 왜 사용하나요?

하나의 파일로 js 파일을 번들할 수 있습니다.
프론트엔드 코드에 npm 패키지를 사용할 수 있습니다.
ES6/ES7 자바스크립트 코드를 작성할 수 있습니다. (Babel을 이용하여)
코드를 압축 또는 최적화할 수 있습니다. LESS/SCSS를 CSS로 돌릴 수 있습니다.
HMR(Hot Module Replacement)을 사용할 수 있습니다.
자바스크립트로 모든 유형의 파일을 포함할 수 있습니다.
이 글에서 다루지 못한 아주 많은 고급기능이 있습니다.

왜 이러한 기능이 필요한가요?

js 파일 번들 - 자바스크립트를 모듈로 작성할 수 있습니다, 그래서 각각의 파일에 대해서 script 태그를 별도로 작성할 필요가 없습니다. (상황에 따라서 둘 이상의 js 파일이 필요한 경우 구성 가능함)
npm 패키지 사용 - npm은 인터넷상에서 오픈소스 코드의 커다란 생태계입니다. npm 코드를 저장할 기회가 주어지며, 원하는 프론트엔드 패키지를 가져다 쓸 수 있습니다.
ES6/ES7 - 많은 기능을 추가되어 더 강력하고 더 쉽게 자바스크립트를 작성할 수 있습니다. 여기에 소개하는 글이 있습니다. 코드 압축/최적화 - 배포되는 파일의 크기를 줄입니다. 페이지 로딩이 빨라지는 등의 장점을 포함합니다.
LESS/SCSS를 CSS로 돌리기 - CSS를 작성하는 더 좋은 방법입니다.
HMR 사용 - 생산성이 향상됩니다. 코드를 저장할 때 마다 페이지의 리프레시가 자동으로 이루어집니다. 코드를 작성하는 동안 페이지의 상태를 최신으로 유지해야 하는 경우 정말 편리합니다. 자바스크립트로 모든 유형의 파일을 포함 - 추가적인 빌드 도구의 수를 줄일 수 있고, 프로그램적으로 파일을 사용 및 수정할 수 있습니다.
출처