DevServer

webpack-dev-server는 애플리케이션을 빠르게 개발하는 데 사용할 수 있습니다. 개발 가이드 문서를 통해 시작해 보세요.

이 페이지는 webpack-dev-server(약칭: dev-server)version >= 4.0.0의 동작에 영향을 미치는 옵션에 관해 설명합니다. v3에서 v4로의 마이그레이션 가이드는 여기를 참고하세요.

devServer

object

이 옵션 세트는 webpack-dev-server에서 선택하며 다양한 방식으로 동작을 변경하는 데 사용할 수 있습니다. 다음은 프로젝트 루트에 있는 public/ 디렉터리의 모든 것을 gzip으로 압축하고 제공하는 기본적인 예입니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

서버가 시작되면, 해석된 모듈 목록 앞에 메시지가 표시됩니다.

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/
<i> [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory

이를 통해 서버가 어디에 있고 무엇을 제공하는지에 대한 배경지식을 얻을 수 있습니다.

Node.js API를 통해 dev-server를 사용하는 경우 devServer의 옵션은 무시됩니다. 대신 다음 옵션을 첫 번째 매개변수로 전달합니다. new WebpackDevServer({...}, compiler). Node.js API를 통해 webpack-dev-server를 사용하는 방법의 예는 여기를 참고하세요.

Usage via CLI

다음과 같이 CLI를 통해 webpack-dev-server를 호출할 수 있습니다.

npx webpack serve

serve에 대한 CLI 옵션 목록은 여기에서 확인할 수 있습니다.

Usage via API

CLI를 통해 webpack-dev-server를 실행하는 것이 권장되지만, API를 통해 서버를 시작하도록 선택할 수도 있습니다.

webpack-dev-server 관련 API 문서를 참고하세요.

devServer.allowedHosts

'auto' | 'all' [string]

개발 서버에 접근할 수 있는 서비스를 허용목록에 추가할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com',
    ],
  },
};

Django의 ALLOWED_HOSTS를 모방하여, .로 시작하는 값을 하위 도메인 와일드카드로 사용할 수 있습니다. .host.com은 host.com, www.host.com, 및 host.com의 다른 하위 도메인과 일치합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    // 이것은 새 하위 도메인이 개발 서버에 접근해야 하는 경우
    // 설정을 업데이트할 필요가 없다는 보너스와 함께
    // 첫 번째 예와 동일한 효과를 얻습니다
    allowedHosts: ['.host.com', 'host2.com'],
  },
};

CLI를 통한 사용법.

npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

'all'로 설정하면 호스트 검사를 무시합니다. 호스트를 확인하지 않는 앱은 DNS 리바인딩 공격에 취약하기 때문에 권장하지 않습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: 'all',
  },
};

CLI를 통한 사용법.

npx webpack serve --allowed-hosts all

'auto'로 설정하면 항상 localhost, host, 및 client.webSocketURL.hostname를 허용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    allowedHosts: 'auto',
  },
};

CLI를 통한 사용법.

npx webpack serve --allowed-hosts auto

devServer.bonjour

boolean = false object

이 옵션은 시작할 때 ZeroConf 네트워크를 통해 서버를 브로드캐스트합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    bonjour: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --bonjour

비활성화 하는법.

npx webpack serve --no-bonjour

커스텀 옵션을 bonjour에 전달할 수도 있습니다. 예를 들면 아래와 같습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    bonjour: {
      type: 'http',
      protocol: 'udp',
    },
  },
};

devServer.client

logging

'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'

브라우저에서 로그 수준을 설정할 수 있습니다. 예를 들면, 다시 로드하기 전, 오류 전 또는 Hot Module Replacement가 활성화된 경우입니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      logging: 'info',
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-logging info

overlay

boolean = true object

컴파일러 오류 또는 경고가 있는 경우 브라우저에 전체 화면 오버레이를 표시합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: true,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-overlay

비활성화 하는법.

npx webpack serve --no-client-overlay

보다 세분화된 제어를 위해 다음 속성을 가진 개체를 제공할 수 있습니다.

모든 속성은 선택 사항이며 제공되지 않은 경우 기본값은 'true'입니다.

예를 들어 컴파일 경고를 비활성화하려면 다음 설정을 제공할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
        runtimeErrors: true,
      },
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-overlay-errors --no-client-overlay-warnings --client-overlay-runtime-errors

발생한 오류를 기준으로 필터링하려면 error 매개변수를 허용하고 boolean 값을 반환하는 함수를 전달할 수 있습니다.

예를 들어, AbortController.abort()에 의해 발생한 오류를 무시하려면 다음을 수행하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          if (error instanceof DOMException && error.name === 'AbortError') {
            return false;
          }
          return true;
        },
      },
    },
  },
};

progress

boolean

브라우저에서 컴파일 진행률을 백분율로 출력합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      progress: true,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-progress

비활성화 하는법.

npx webpack serve --no-client-progress

reconnect

boolean = true number

클라이언트 재연결을 시도해야 하는 횟수를 dev-server에 알려줍니다. true라면 무제한 재연결을 시도합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: true,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-reconnect

false로 설정하면 다시 연결을 시도하지 않습니다.

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: false,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --no-client-reconnect

클라이언트가 다시 연결을 시도해야 하는 정확한 횟수를 지정할 수도 있습니다.

module.exports = {
  //...
  devServer: {
    client: {
      reconnect: 5,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-reconnect 5

webSocketTransport

'ws' | 'sockjs' string

클라이언트에 대한 현재 devServer 전송 모드를 개별적으로 선택하거나 커스텀 클라이언트 구현을 제공할 수 있습니다. 이를 통해 브라우저나 다른 클라이언트가 devServer와 통신하는 방법을 지정할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: 'ws',
    },
    webSocketServer: 'ws',
  },
};

CLI를 통한 사용법.

npx webpack serve --client-web-socket-transport ws --web-socket-server ws

커스텀 클라이언트 구현을 생성하려면 BaseClient를 확장하는 클래스를 생성합니다.

호환되는 'ws' 서버와 함께 커스텀 웹 소켓 클라이언트 구현인 CustomClient.js에 대한 경로를 사용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: 'ws',
  },
};

커스텀을 사용하여, 호환 가능한 웹 소켓 클라이언트 및 서버 구현법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

webSocketURL

string object

웹 소켓 서버에 대한 URL을 지정할 수 있습니다. 개발 서버를 프록시하고 클라이언트 스크립트가 연결 위치를 항상 알지 못하는 경우에 유용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: 'ws://0.0.0.0:8080/ws',
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws

다음 프로퍼티들을 사용하여 객체를 지정할 수도 있습니다.

• hostname: 제공된 호스트 이름을 사용하도록 devServer에 연결된 클라이언트에 지시합니다.
• pathname: devServer에 연결된 클라이언트에게 제공된 경로를 사용하여 연결하도록 지시합니다.
• password: devServer에 연결된 클라이언트에게 제공된 비밀번호를 사용하여 인증하도록 지시합니다.
• port: devserver에 연결된 클라이언트에게 제공된 포트를 사용하도록 지시합니다.
• protocol: devserver에 연결된 클라이언트에게 제공된 프로토콜을 사용하도록 지시합니다.
• username: devserver에 연결된 클라이언트에게 제공된 사용자 이름을 사용하여 인증하도록 지시합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketURL: {
        hostname: '0.0.0.0',
        pathname: '/ws',
        password: 'dev-server',
        port: 8080,
        protocol: 'ws',
        username: 'webpack',
      },
    },
  },
};

devServer.compress

boolean = true

제공되는 모든 항목에 대해 gzip 압축을 활성화합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    compress: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --compress

비활성화 하는법.

npx webpack serve --no-compress

devServer.devMiddleware

object

Webpack 애셋을 처리하는 webpack-dev-middleware에 옵션을 제공합니다.

webpack.config.js

module.exports = {
  devServer: {
    devMiddleware: {
      index: true,
      mimeTypes: { phtml: 'text/html' },
      publicPath: '/publicPathForDevServe',
      serverSideRender: true,
      writeToDisk: true,
    },
  },
};

devServer.http2

boolean

spdy를 사용하여 HTTP/2를 통해 제공합니다. Node 15.0.0 이상에서는 spdy에서 문제가 발생하기 때문에 이 옵션은 무시됩니다. 개발 서버는 Express가 지원하는 Node의 내장 HTTP/2로 마이그레이션 됩니다.

자체 서명된 인증서가 있는 HTTP/2.

webpack.config.js

module.exports = {
  //...
  devServer: {
    http2: true,
  },
};

CLI를 통한 사용법

npx webpack serve --http2

비활성화 하는법.

npx webpack serve --no-http2

https 옵션을 사용하여 고유한 인증서를 제공합니다.

webpack.config.js

const fs = require('fs');

module.exports = {
  //...
  devServer: {
    http2: true,
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
    },
  },
};

CLI를 통해 인증서를 전달하려면, 다음 옵션을 사용하세요.

npx webpack serve --http2 --https-key ./path/to/server.key --https-cert ./path/to/server.crt --https-ca ./path/to/ca.pem

devServer.https

boolean object

기본적으로, dev-server는 HTTP를 통해 제공됩니다. 선택적으로 HTTPS를 통해 제공될 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    https: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --https

비활성화 하는법.

npx webpack serve --no-https

위의 설정에서는 자체 서명된 인증서가 사용되지만, 다음과 같이 인증서를 제공할 수도 있습니다.

webpack.config.js

module.exports = {
  devServer: {
    https: {
      ca: './path/to/server.pem',
      pfx: './path/to/server.pfx',
      key: './path/to/server.key',
      cert: './path/to/server.crt',
      passphrase: 'webpack-dev-server',
      requestCert: true,
    },
  },
};

이 객체는 Node.js HTTPS 모듈로 바로 전달되므로, 자세한 내용은 HTTPS 문서를 참고하세요.

CLI를 통해 자체 인증서를 전달하려면 다음 옵션을 사용하세요.

npx webpack serve --https-request-cert --https-key ./path/to/server.key --https-cert ./path/to/server.crt --https-ca ./path/to/ca.pem --https-pfx ./path/to/server.pfx --https-passphrase webpack-dev-server

webpack-dev-server >= v4.2.0을 사용하면 minVersion과 같은 추가 TLS options 옵션을 설정할 수 있습니다. 또한, 각 파일의 내용을 직접 전달할 수 있습니다.

webpack.config.js

const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    https: {
      minVersion: 'TLSv1.1',
      key: fs.readFileSync(path.join(__dirname, './server.key')),
      pfx: fs.readFileSync(path.join(__dirname, './server.pfx')),
      cert: fs.readFileSync(path.join(__dirname, './server.crt')),
      ca: fs.readFileSync(path.join(__dirname, './ca.pem')),
      passphrase: 'webpack-dev-server',
      requestCert: true,
    },
  },
};

devServer.headers

array function object

모든 응답에 헤더를 추가합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar',
    },
  },
};

배열을 전달할 수도 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    headers: [
      {
        key: 'X-Custom',
        value: 'foo',
      },
      {
        key: 'Y-Custom',
        value: 'bar',
      },
    ],
  },
};

함수를 전달할 수도 있습니다.

module.exports = {
  //...
  devServer: {
    headers: () => {
      return { 'X-Bar': ['key1=value1', 'key2=value2'] };
    },
  },
};

devServer.historyApiFallback

boolean = false object

HTML5 History API를 사용할 때, index.html 페이지는 404 응답 대신 제공되어야 합니다. true로 설정하여 devServer.historyApiFallback을 활성화합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --history-api-fallback

비활성화 하는법.

npx webpack serve --no-history-api-fallback

객체를 제공하면 rewrites와 같은 옵션을 사용하여 이 동작을 추가로 제어할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' },
      ],
    },
  },
};

경로에 점을 사용할 때(Angular와 공통), disableDotRule을 사용해야 할 수도 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      disableDotRule: true,
    },
  },
};

더 많은 옵션과 정보는, connect-history-api-fallback 문서를 참고하세요.

devServer.host

'local-ip' | 'local-ipv4' | 'local-ipv6' string

사용할 호스트를 지정합니다. 외부에서 서버에 접근할 수 있도록 하려면, 다음과 같이 지정합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
  },
};

CLI를 통한 사용법.

npx webpack serve --host 0.0.0.0

IPv6에서도 작동합니다.

npx webpack serve --host ::

local-ip

local-ip를 호스트로 지정하면 호스트 옵션을 사용 가능한 경우 로컬 IPv4 주소로 확인하려고 시도하고, IPv4를 사용할 수 없는 경우 로컬 IPv6 주소를 확인하려고 시도합니다.

npx webpack serve --host local-ip

local-ipv4

local-ipv4를 호스트로 지정하면 호스트 옵션을 로컬 IPv4 주소로 확인하려고 시도합니다.

npx webpack serve --host local-ipv4

local-ipv6

local-ipv6를 호스트로 지정하면 호스트 옵션을 로컬 IPv6 주소로 확인하려고 시도합니다.

npx webpack serve --host local-ipv6

devServer.hot

'only' boolean = true

Webpack의 Hot Module Replacement 기능을 활성화합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --hot

비활성화 하는법.

npx webpack serve --no-hot

빌드 실패의 경우 대체로 페이지 새로 고침 없이 Hot Module Replacement를 활성화하려면 hot: 'only'를 사용하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    hot: 'only',
  },
};

CLI를 통한 사용법.

npx webpack serve --hot only

devServer.ipc

true string

(host 대신) 수신할 Unix 소켓.

true로 설정하면 /your-os-temp-dir/webpack-dev-server.sock에서 소켓을 수신합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    ipc: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --ipc

다음을 사용하여 다른 소켓을 수신할 수도 있습니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    ipc: path.join(__dirname, 'my-socket.sock'),
  },
};

devServer.liveReload

boolean = true

기본적으로, dev-server는 파일 변경이 감지되면 페이지를 다시 로드하고 새로고침 합니다. liveReload를 적용하려면 devServer.hot 옵션을 비활성화하거나 devServer.watchFiles 옵션을 활성화해야 합니다. false로 설정하여 devServer.liveReload를 비활성화합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    liveReload: false,
  },
};

CLI를 통한 사용법.

npx webpack serve --live-reload

비활성화 하는법.

npx webpack serve --no-live-reload

devServer.magicHtml

boolean = true

Dev-server에 매직 HTML 경로(webpack 출력에 해당하는 경로, 예를 들어 main.js의 경우 /main)를 활성화/비활성화하도록 지시합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    magicHtml: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --magic-html

비활성화 하는법.

npx webpack serve --no-magic-html

devServer.onAfterSetupMiddleware

function (devServer)

서버 내부에서 다른 모든 미들웨어 이후에 커스텀 미들웨어를 실행할 수 있는 기능을 제공합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    onAfterSetupMiddleware: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/some/path', function (req, res) {
        res.json({ custom: 'response' });
      });
    },
  },
};

devServer.onBeforeSetupMiddleware

function (devServer)

서버 내부에서 다른 모든 미들웨어보다 먼저 커스텀 미들웨어를 실행할 수 있는 함수를 제공합니다. 이것은 커스텀 핸들러를 정의하는 데 사용할 수 있습니다. 예를 들면 아래와 같습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    onBeforeSetupMiddleware: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/some/path', function (req, res) {
        res.json({ custom: 'response' });
      });
    },
  },
};

devserver.onListening

function (devServer)

Webpack-dev-server가 포트에서 연결 수신을 시작할 때 커스텀 함수를 실행하는 기능을 제공합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    onListening: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      const port = devServer.server.address().port;
      console.log('Listening on port:', port);
    },
  },
};

devServer.open

boolean string object [string, object]

서버가 시작된 후 브라우저를 열도록 dev-server에 지시합니다. 기본 브라우저를 열려면 true로 설정하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: true,
  },
};

CLI를 통한 사용법.

npx webpack serve --open

비활성화 하는법.

npx webpack serve --no-open

브라우저에서 지정된 페이지를 여는법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page'],
  },
};

CLI를 통한 사용법.

npx webpack serve --open /my-page

브라우저에서 지정된 여러 페이지를 여는법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page', '/another-page'],
  },
};

CLI를 통한 사용법.

npx webpack serve --open /my-page --open /another-page

기본 브라우저 대신 사용할 경우의 브라우저 이름 제공법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      app: {
        name: 'google-chrome',
      },
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --open-app-name 'google-chrome'

객체는 모든 open 옵션을 허용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      target: ['first.html', 'http://localhost:8080/second.html'],
      app: {
        name: 'google-chrome',
        arguments: ['--incognito', '--new-window'],
      },
    },
  },
};

devServer.port

'auto' string number

요청을 수신할 포트 번호를 지정하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};

CLI를 통한 사용법.

npx webpack serve --port 8080

port 옵션은 null이거나 빈 문자열일 수 없으므로, 자동으로 여유 포트를 사용하려면 port: 'auto'를 사용하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 'auto',
  },
};

CLI를 통한 사용법.

npx webpack serve --port auto

devServer.proxy

object [object, function]

별도의 백엔드 API 개발 서버가 있고 동일한 도메인에서 API 요청을 보내려는 경우 일부 URL을 프록시하는 것이 유용할 수 있습니다.

dev-server는 강력한 http-proxy-middleware 패키지를 사용합니다. 고급 사용법에 대한 문서를 확인하세요. http-proxy-middleware의 일부 기능에서는 target 키가 필요하지 않습니다, 예를 들어 router 기능이 있지만, 여기의 설정에 target 키를 포함해야 합니다. 그렇지 않으면 webpack-dev-server가 이를 http-proxy-middleware에 전달하지 않습니다.

localhost:3000의 백엔드에서, 다음을 사용하여 프록시를 활성화할 수 있습니다.

webpack.config.js

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

/api/users에 대한 요청은 이제 http://localhost:3000/api/users에 대한 요청을 프록시 처리합니다.

/api가 전달되는 것을 원하지 않으면 경로를 다시 작성해야 합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

유요하지 않은 인증서로 HTTPS에서 실행되는 백엔드 서버는 기본적으로 허용되지 않습니다. 원하는 경우, 다음과 같이 설정을 수정하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    },
  },
};

때로는 모든 것을 프록시로 처리하고 싶지 않을 때가 있습니다. 함수의 반환 값에 따라 프록시를 우회할 수 있습니다.

함수에서 요청, 응답 및 프록시 옵션에 접근할 수 있습니다.

• 프록시로 요청을 계속 처리하려면 null 또는 undefined를 반환합니다.
• 요청에 대해 404 오류를 생성하려면 false를 반환합니다.
• 요청을 계속하는 대신, 서비스를 제공할 경로를 반환합니다.

예를 들어 브라우저 요청의 경우 HTML 페이지를 제공하고 싶지만, API 요청의 경우 프록시를 사용하려고 할 경우 다음과 같이 할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    },
  },
};

동일한 대상에 대한 여러 특정 경로를 프록시 하려면 context 프로퍼티가 있는 하나 이상의 객체 배열을 사용할 수 있습니다.

webpack.config.js

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

루트에 대한 요청은 기본적으로 프록시되지 않습니다. 루트 프록시를 활성화하려면, devMiddleware.index 옵션을 거짓 값으로 지정해야 합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    devMiddleware: {
      index: false, // 루트 프록시를 사용하도록 지정
    },
    proxy: {
      context: () => true,
      target: 'http://localhost:1234',
    },
  },
};

호스트 헤더의 출처는 기본적으로 프록시 될 때 유지되며, changeOrigin을 true로 설정하여 이 동작을 재정의할 수 있습니다. 이름 기반 가상 호스팅 사이트를 사용하는 것과 같은 경우에 유용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

devServer.server

'http' | 'https' | 'spdy' string object

서버 및 옵션을 설정할 수 있습니다(기본값은 'http').

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'http',
  },
};

CLI를 통한 사용법.

npx webpack serve --server-type http

자체 서명된 인증서로 HTTPS를 통해 서비스하는법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'https',
  },
};

CLI를 통한 사용법.

npx webpack serve --server-type https

자체 서명된 인증서와 함께 spdy를 사용하여 HTTP/2 통신하는 법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: 'spdy',
  },
};

CLI를 통한 사용법.

npx webpack serve --server-type spdy

객체 구문을 사용한 고유한 인증서 제공법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    server: {
      type: 'https',
      options: {
        ca: './path/to/server.pem',
        pfx: './path/to/server.pfx',
        key: './path/to/server.key',
        cert: './path/to/server.crt',
        passphrase: 'webpack-dev-server',
        requestCert: true,
      },
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --server-type https --server-options-key ./path/to/server.key --server-options-cert ./path/to/server.crt --server-options-ca ./path/to/ca.pem --server-options-passphrase webpack-dev-server

또한 minVersion과 같은 추가 TLS 옵션을 설정할 수 있으며 각 파일의 내용을 직접 전달할 수 있습니다.

webpack.config.js

const fs = require('fs');
const path = require('path');

module.exports = {
  //...
  devServer: {
    server: {
      type: 'https',
      options: {
        minVersion: 'TLSv1.1',
        key: fs.readFileSync(path.join(__dirname, './server.key')),
        pfx: fs.readFileSync(path.join(__dirname, './server.pfx')),
        cert: fs.readFileSync(path.join(__dirname, './server.crt')),
        ca: fs.readFileSync(path.join(__dirname, './ca.pem')),
        passphrase: 'webpack-dev-server',
        requestCert: true,
      },
    },
  },
};

devServer.setupExitSignals

boolean = true

개발 서버를 닫고 SIGINT 및 SIGTERM 신호에서 프로세스를 종료할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    setupExitSignals: true,
  },
};

devServer.setupMiddlewares

function (middlewares, devServer)

커스텀 함수를 실행하고 커스텀 미들웨어를 적용하는 기능을 제공합니다.

webpack.config.js

module.exports = {
  // ...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/setup-middleware/some/path', (_, response) => {
        response.send('setup-middlewares option GET');
      });

      // 다른 모든 미들웨어보다 먼저 미들웨어를 실행하려면 `unshift` 메소드를 사용하세요
      // 또는 `onBeforeSetupMiddleware` 옵션에서 마이그레이션 할 때 사용하세요
      middlewares.unshift({
        name: 'first-in-array',
        // `path`는 옵셔널입니다
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // 다른 모든 미들웨어 이후에 미들웨어를 실행하려면 `push` 메소드를 사용하세요
      // 또는 `onBeforeSetupMiddleware` 옵션에서 마이그레이션 할 때 사용하세요
      middlewares.push({
        name: 'hello-world-test-one',
        // `path`는 옵셔널입니다
        path: '/foo/bar',
        middleware: (req, res) => {
          res.send('Foo Bar!');
        },
      });

      middlewares.push((req, res) => {
        res.send('Hello World!');
      });

      return middlewares;
    },
  },
};

devServer.static

boolean string object [string, object]

디렉터리(기본적으로 'public' 디렉터리)에서 정적 파일을 제공하기 위한 옵션을 구성할 수 있습니다. 비활성화하려면 false로 설정하세요:

webpack.config.js

module.exports = {
  //...
  devServer: {
    static: false,
  },
};

CLI를 통한 사용법.

npx webpack serve --static

비활성화 하는법.

npx webpack serve --no-static

단일 디렉터리 설정.

webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: ['assets'],
  },
};

CLI를 통한 사용법.

npx webpack serve --static assets

다중 디렉터리 설정.

webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: ['assets', 'css'],
  },
};

CLI를 통한 사용법.

npx webpack serve --static assets --static css

directory

string = path.join(process.cwd(), 'public')

서버에 콘텐츠를 제공할 위치를 알려줍니다. 이것은 정적 파일을 제공하려는 경우에만 필요합니다. static.publicPath는 번들을 제공해야 하는 위치와 우선순위를 결정하는 데 사용됩니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
  },
};

여러 개의 정적 폴더가 있는 경우 객체 배열을 제공합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'assets'),
      },
      {
        directory: path.join(__dirname, 'css'),
      },
    ],
  },
};

staticOptions

object

static.directory에서 정적 파일을 제공하기 위한 고급 옵션을 구성할 수 있습니다. 가능한 옵션은 Express 문서를 참고하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    static: {
      staticOptions: {
        redirect: true,
      },
    },
  },
};

publicPath

string = '/' [string]

static.directory 콘텐츠를 제공할 URL을 서버에 알려주세요. 예를 들면 /serve-public-path-url/manifest.json에서 assets/manifest.json 파일을 제공하려면, 설정은 다음과 같아야 합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'assets'),
      publicPath: '/serve-public-path-url',
    },
  },
};

여러 개의 정적 폴더가 있는 경우 객체 배열을 제공합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, 'assets'),
        publicPath: '/serve-public-path-url',
      },
      {
        directory: path.join(__dirname, 'css'),
        publicPath: '/other-serve-public-path-url',
      },
    ],
  },
};

serveIndex

boolean object = { icons: true }

dev-server가 활성화되면 serveIndex 미들웨어를 사용하도록 지시합니다.

serveIndex 미들웨어는 index.html 파일이 없는 디렉터리를 볼 때 디렉터리 목록을 생성합니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      serveIndex: true,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --static-serve-index

비활성화 하는법.

npx webpack serve --no-static-serve-index

watch

boolean object

dev-server에게 static.directory 옵션이 제공하는 파일을 감시하도록 지시합니다. 이는 기본적으로 활성화되어 있으며, 파일 변경 시 전체 페이지가 새로고침됩니다. 이것은 watch옵션을 false로 설정하여 비활성화할 수 있습니다.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: false,
    },
  },
};

CLI를 통한 사용법.

npx webpack serve --static-watch

비활성화 하는법.

npx webpack serve --no-static-watch

static.directory에서 정적 파일을 보기 위한 고급 옵션을 구성할 수 있습니다. 가능한 옵션은 chokidar 문서를 참고하세요.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      watch: {
        ignored: '*.txt',
        usePolling: false,
      },
    },
  },
};

devServer.watchFiles

string object [string, object]

파일 변경 사항을 감시할 globs/directories/files 목록을 구성할 수 있습니다. 예를 들면 다음과 같습니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: ['src/**/*.php', 'public/**/*'],
  },
};

파일 감시를 위한 고급 옵션을 구성할 수 있습니다. 가능한 옵션은 chokidar 문서를 참고하세요.

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: {
      paths: ['src/**/*.php', 'public/**/*'],
      options: {
        usePolling: false,
      },
    },
  },
};

devServer.webSocketServer

false | 'sockjs' | 'ws' string function object

현재 웹 소켓 서버를 선택하거나 커스텀 웹 소켓 서버를 제공할 수 있습니다.

현재 기본 모드는 'ws'입니다. 이 모드는 ws를 서버로 사용하고, 기본 WebSocket을 클라이언트로 사용합니다.

webpack.config.js

module.exports = {
  //...
  devServer: {
    webSocketServer: 'ws',
  },
};

커스텀 서버를 구현하려면, BaseServer를 확장하는 클래스를 생성하세요.

호환되는 'ws' 클라이언트와 함께 커스텀 WebSocket 서버가 구현되어 있는 CustomServer.js에 대한 경로 사용법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: 'ws',
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};

호환 가능한 커스텀 WebSocket 클라이언트 및 서버 구현 사용법.

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      webSocketTransport: require.resolve('./CustomClient'),
    },
    webSocketServer: require.resolve('./CustomServer'),
  },
};