yeon
yeon I am a Korean web programmer with bboy dancing as a hobby. :)

Webpack-dev-server

Webpack-dev-server

Webpack-dev-server

webpack-dev-server는 애플리케이션을 빠르게 개발하는데 사용할 수 있다. 이는 간단한 웹 서버와 라이브 리로딩이 가능한 기능을 제공한다. 이는 개발용 서버로 개발환경에서도 운영환경과 비슷하게 맞춤으로써 배포시 생길 수 있는 잠재적인 문제를 미리 확인할 수 있다.

  1. webpack-dev-server를 실행하게되면 소스파일을 번들하여 메모리에 올려둠
  2. 소스파일 변경시 변경된 모듈만 번들
  3. 변경된 모듈을 브라우저로 전송
  4. 브라우저가 새로고침되고 변경사항이 반영



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]:




comments powered by Disqus