Webpack-dev-server

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

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

Install & use

npm i webpack-dev-server

webpack-dev-server 패키지를 설치 후 npm script 설정

package.json

{
  "scripts": {
    "start": "webpack-dev-server"
  }
}

script에서 —progress 추가시 빌드 진행율을 볼 수 있다

{
  "scripts": {
    "start": "webpack-dev-server --progress"
  }
}

devServer 설정

웹팩에서 devServer 객체로 개발 서버 옵션을 설정 가능

webpack.config.js

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를 생성해 주는것도 가능하다.

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',bkeyword:'dev', keyword:'server'

connect-api-mocker

Mock Data 작업이 많은 경우 connect-api-mocker를 사용하여 api 응답 데이터 설정이 가능하다.

npm i connect-api-mocker

해당 패키지를 설치

Node Server에서 사용하게 되는 경우 middleware로 설정하여 사용

Using with Connect

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

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

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

;[{ keyword: 'webpack' }, { keyword: 'dev' }, { keyword: 'server' }]

devServer proxy

devServer에 proxy를 설정하여 서버에 직업 api 요청을 하여 사용하는 방법도 가능하다.

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 설정이 필요하다.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        secure: false,
      },
    },
  },
}

응답 받은 값에 따라 프록시를 우회하고 싶은 경우 bypass를 설정한다.

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속성을 사용

module.exports = {
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
}

루트에 대한 요청은 기본적으로 프록시 되지 않기 때문에 거짓값으로 지정한다.

module.exports = {
  devServer: {
    proxy: [
      {
        context: () => true,
        target: 'http://localhost:3000',
      },
    ],
  },
}

[ref]: