Webpack Dev Server
웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구이다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다.
매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다.
웹팩 데브 서버의 특징
웹팩 데브 서버는 일반 웹팩 빌드와 다른점이 있다.
"scripts": {
"dev": "webpack serve",
"build": "webpack"
}웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 좀 더 구체적으로 얘기하자면 웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지는 않기 때문에 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 순 없다.
따라서, 웹팩 데브 서버는 개발할 때만 사용하다가 개발이 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성해야 한다.
프록시(Proxy) 설정
프록시 설정은 실무에서 가장 흔하게 사용하는 속성.
// webpack.config.js
module.exports = {
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};위와 같이 설정하고 나면 로컬 웹팩 데브 서버에서 발생하는 API 요청에 변화가 생긴다. 먼저 프록시를 쓰지 않았을 때의 기본적인 웹팩 데브 서버와 API 서버의 통신 구조이다.
여기서 CORS라는 용어가 나온다. 이 용어는 브라우저 보안과 관계가 있는데 쉽게 얘기하면 다른 도메인 간에는 자바스크립트로 자원을 요청할 수 없다는 의미입니다. 위 그림에서도 서버에 로그인 관련 API 요청을 했는데 CORS 오류가 나는 걸 볼 수 있다.
뷰, 리액트와 같은 프런트엔드 프레임워크를 쓰면 개발 편의상 로컬에 웹팩 데브 서버를 띄워놓고 개발하는 경우가 많다. 이 때, 이러한 문제를 해결하기 위해서 아래와 같이 프록시 속성을 설정하면 서버에서 해당 요청을 받아준다.
module.exports = {
devServer: {
proxy: {
'/api': 'domain.com'
}
}
};CORS가 브라우저 보안과 관련있기 때문에 브라우저에서 벗어나 서버에서 서버로 요청한다. 실제로 브라우저에서는 localhost:8080/api/login 으로 요청했지만 중간에 프록시 서버의 활약으로 domain.com 서버에서는 같은 도메인(domain.com)에서 온 요청으로 인식하여 CORS 에러가 나지 않는다.
위와 같이 도메인 이름이 IP 주소가 아니라 가상 이름(domain.com)으로 되어 있는 경우 아래 옵션을 추가해 주셔야 한다.
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'domain.com',
changeOrigin: true
}
}
}
};사용방법
- 빈 폴더에서 아래 명령어로 package.json 파일을 생성
npm init -y- 아래 명령어로 필요 라이브러리 설치
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D- package.json 파일에서 아래와 같이 scripts 속성에 커스텀 명령어를 추가
{
// ...
"scripts": {
"dev": "webpack serve"
},
}- 루트 레벨에 index.html 파일 생성 후 내용 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack Dev Server</title>
</head>
<body>
<!-- 빌드 결과물이 정상적으로 로딩되면 아래 div 태그의 텍스트가 변경됨 -->
<div class="container">
TBD..
</div>
<!-- HTML Webpack Plugin에 의해 웹팩 빌드 내용이 아래에 추가됨 -->
</body>
</html>- 프로젝트 루트 레벨에 index.js 파일 생성 및 아래 내용 추가
var div = document.querySelector('.container');
div.innerText = 'Webpack loaded!!';
웹팩 설정 파일 webpack.config.js 생성 후 아래 내용 추가
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'none',
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
port: 9000,
},
plugins: [
new HtmlWebpackPlugin({
// index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
template: 'index.html',
}),
],
};-
명령어 입력 창에 npm run dev 를 입력하여 웹팩 데브 서버 실행
-
localhost:9000에 접속 후 아래와 같이 화면이 뜨는지 확인
