Webpack-dev-server
webpack-dev-server는 애플리케이션을 빠르게 개발하는데 사용할 수 있다. 이는 간단한 웹 서버와 라이브 리로딩이 가능한 기능을 제공한다. 이는 개발용 서버로 개발환경에서도 운영환경과 비슷하게 맞춤으로써 배포시 생길 수 있는 잠재적인 문제를 미리 확인할 수 있다.
- webpack-dev-server를 실행하게되면 소스파일을 번들하여 메모리에 올려둠
- 소스파일 변경시 변경된 모듈만 번들
- 변경된 모듈을 브라우저로 전송
- 브라우저가 새로고침되고 변경사항이 반영
Install & use
npm i webpack-dev-server
webpack-dev-server 패키지를 설치 후 npm script 설정
package.json
1
2
3
4
5
{
"scripts": {
"start": "webpack-dev-server"
}
}
script에서 —progress 추가시 빌드 진행율을 볼 수 있다
1
2
3
4
5
{
"scripts": {
"start": "webpack-dev-server --progress"
}
}
devServer 설정
웹팩에서 devServer 객체로 개발 서버 옵션을 설정 가능
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
contentBase: path.join(__dirname, 'dist'),
hot: true,
inline: true,
open: true,
overlay: true,
stats: 'errors-only',
historyApiFallback: true,
}
};
- host: 개발환경 도메인 설정
- port: 개발 서버 포트 번호 설정 (default: 8080)
- contentBase: 정적파일 제공 경로 (default: webpack output)
- hot: HMR 활성화
- inline: inline 모드 활성화
- open: dev server 구동시 브라우저 열기
- overlay: 빌드시 에러나 경고를 브라우저 화면에 노출
- stats: 메시지 수준 설정 (‘none’, ‘errors-only’, ‘minimal’, ‘normal’, ‘verbose’)
- historyApiFallback: 히스토리 API 사용하는 경우 404 발생시 index.html로 리다이렉트
before
다른 속성으로는 before 속성이 있는데 이 속성을 사용하여 api 호출시 Mock Data를 생성해 주는것도 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
devServer: {
before: (app, server, compiler) => {
app.get('/api/keyword', (req, res) => {
res.json([
{ keyword: 'webpack' },
{ keyword: 'dev' },
{ keyword: 'server' },
]);
})
},
},
};
서버로 http 요청시 설정한 json 데이터를 받을 수 있다.
localhost:8080/api/keywords → [{keyword:’webpack’},{keyword:’dev’},{keyword:’server’}]
connect-api-mocker
Mock Data 작업이 많은 경우 connect-api-mocker를 사용하여 api 응답 데이터 설정이 가능하다.
npm i connect-api-mocker
해당 패키지를 설치
Node Server에서 사용하게 되는 경우 middleware로 설정하여 사용
Using with Connect
1
2
3
4
5
6
7
8
9
const http = require('http');
const connect = require('connect');
const apiMocker = requrie('connect-api-mocker');
const app = connect();
app.use('/api', apiMocker('mocks/api'));
http.createServer(app).listen(8080);
Using with Express
1
2
3
4
5
6
7
8
const express = require('express');
const apiMocker = require('connect-api-mocker');
const app = express();
app.use('/api', apiMocker('mocks/api'));
app.listen(8080);
Using webpack-dev-server
1
2
3
4
5
6
7
8
const apiMocker = require("connect-api-mocker");
module.exports = {
devServer: {
before: (app, server, compiler) => {
app.use('/api', apiMocker('mocks/api'));
}
}
};
devServer before에서 connect-api-mocker를 사용하여 api 호출
api 경로 에 맞게 응답 파일을 만든다. 해당 메소드에 맞는 json 데이터 파일을 만들어보자.
mocks/api/keywords/GET.json
1
2
3
4
5
[
{ "keyword": "webpack"},
{ "keyword": "dev"},
{ "keyword": "server"}
]
devServer proxy
devServer에 proxy를 설정하여 서버에 직업 api 요청을 하여 사용하는 방법도 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
// target 설정
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api': "/agent"} // api -> agent로 변경하여 요청
}
}
}
};
HTTPS에서 실행되는 서버로 요청할 경우 secure 설정이 필요하다.
1
2
3
4
5
6
7
8
9
10
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
secure: false
}
}
}
};
응답 받은 값에 따라 프록시를 우회하고 싶은 경우 bypass를 설정한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: function(req, res, proxyOptions) {
// html 응답 값으로 오는 경우 /index.html 반환
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request');
return '/index.html';
}
}
}
}
}
};
동일한 대상에 대한 여러 특정 경로를 프록시하려면 context속성을 사용
1
2
3
4
5
6
7
8
module.exports = {
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};
루트에 대한 요청은 기본적으로 프록시 되지 않기 때문에 거짓값으로 지정한다.
1
2
3
4
5
6
7
8
module.exports = {
devServer: {
proxy: [{
context: () => true,
target: 'http://localhost:3000',
}]
}
};
[ref]:
