DevServer

webpack-dev-server を使用すると、アプリケーションを迅速に開発できます。開発ガイド を参照して開始してください。

このページでは、webpack-dev-server（略称：dev-server）の動作に影響を与えるオプションについて説明します。バージョン >= 5.0.0 v4 から v5 への移行ガイドはこちらにあります。

devServer

オブジェクト

このオプションセットは 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 を使用する方法の例については、こちらを参照してください。

CLI を使用した使用方法

CLI を使用して webpack-dev-server を呼び出すには

npx webpack serve

serve の CLI オプションの一覧はこちらにあります。

API を使用した使用方法

CLI を使用して webpack-dev-server を実行することをお勧めしますが、API を介してサーバーを起動することもできます。

関連するwebpack-dev-serverのAPIドキュメントを参照してください。

devServer.allowedHosts

'auto' | 'all' [string]

このオプションを使用すると、dev サーバーへのアクセスを許可するサービスを許可リストに登録できます。

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: {
    // this achieves the same effect as the first example
    // with the bonus of not having to update your config
    // if new subdomains need to access the dev server
    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パラメーターを受け入れ、ブール値を返す関数を渡すことができます。

たとえば、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-type ws

カスタムクライアント実装を作成するには、BaseClientを拡張するクラスを作成します。

CustomClient.jsへのパスを使用し、互換性のある'ws'サーバーと共にカスタムWebSocketクライアント実装を使用します。

webpack.config.js

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

カスタムで互換性のあるWebSocketクライアントとサーバーの実装を使用します。

webpack.config.js

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

webSocketURL

string object

このオプションを使用すると、WebSocketサーバーへのURLを指定できます（devサーバーをプロキシしている場合、クライアントスクリプトが常に接続先を認識するとは限らないため便利です）。

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

オブジェクト

Webpackアセットを処理するwebpack-dev-middlewareにオプションを提供します。

webpack.config.js

module.exports = {
  devServer: {
    devMiddleware: {
      index: true,
      mimeTypes: { phtml: 'text/html' },
      publicPath: '/publicPathForDevServe',
      serverSideRender: true,
      writeToDisk: 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のホットモジュール置換機能を有効にします。

webpack.config.js

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

CLI を使用した使用方法

npx webpack serve --hot

無効にするには

npx webpack serve --no-hot

ビルド失敗時のフォールバックとして、ページのリフレッシュなしでホットモジュール置換を有効にするには、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はページをリロード/更新します。devServer.hotオプションを無効にするか、devServer.watchFilesオプションを有効にする必要があります。liveReloadを有効にするには、devServer.liveReloadをfalseに設定して無効にします。

webpack.config.js

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

CLI を使用した使用方法

npx webpack serve --live-reload

無効にするには

npx webpack serve --no-live-reload

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, 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: [
      {
        context: ['/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

/api/usersへのリクエストは、http://localhost:3000/api/usersにリクエストをプロキシします。

/apiを渡したくない場合は、パスを書き換える必要があります。

webpack.config.js

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

無効な証明書を持つHTTPSで実行されているバックエンドサーバーは、デフォルトでは受け入れられません。必要な場合は、次のように設定を変更してください。

webpack.config.js

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

すべてをプロキシしたくない場合があります。関数の戻り値に基づいてプロキシをバイパスできます。

関数では、リクエスト、レスポンス、およびプロキシオプションにアクセスできます。

• プロキシでリクエストの処理を続行するには、nullまたはundefinedを返します。
• リクエストに404エラーを生成するには、falseを返します。
• リクエストのプロキシを続行する代わりに、提供するパスを返します。

例：ブラウザのリクエストではHTMLページを提供したいが、APIリクエストではプロキシしたい場合、次のようなことができます。

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/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プロパティを持つ1つ以上のオブジェクトの配列を使用できます。

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, // specify to enable root proxying
    },
    proxy: [
      {
        context: () => true,
        target: 'http://localhost:1234',
      },
    ],
  },
};

ホストヘッダーのオリジンはデフォルトでプロキシ時に保持されます。この動作をオーバーライドするには、changeOriginをtrueに設定できます。名前ベースの仮想ホストサイトを使用する場合などに役立ちます。

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/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シグナルでdevサーバーを閉じ、プロセスを終了できます。

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');
      });

      // Use the `unshift` method if you want to run a middleware before all other middlewares
      // or when you are migrating from the `onBeforeSetupMiddleware` option
      middlewares.unshift({
        name: 'first-in-array',
        // `path` is optional
        path: '/foo/path',
        middleware: (req, res) => {
          res.send('Foo!');
        },
      });

      // Use the `push` method if you want to run a middleware after all other middlewares
      // or when you are migrating from the `onAfterSetupMiddleware` option
      middlewares.push({
        name: 'hello-world-test-one',
        // `path` is optional
        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

オブジェクト

static.directoryから静的ファイルを提供するための高度なオプションを設定できます。Expressのドキュメントで可能なオプションを確認してください。

webpack.config.js

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

publicPath

string = '/' [string]

static.directoryのコンテンツを提供するURLをサーバーに指示します。たとえば、assets/manifest.jsonファイルを/serve-public-path-url/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

static.directoryオプションで提供されるファイルをdev-serverが監視するように指示します。デフォルトで有効になっており、ファイルの変更によってページが完全にリロードされます。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]

このオプションを使用すると、ファイルの変更を監視するglob/ディレクトリ/ファイルのリストを設定できます。例えば

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

このオプションを使用すると、現在のWebソケットサーバーを選択するか、カスタムWebソケットサーバーの実装を提供できます。

現在のデフォルトモードは'ws'です。このモードはサーバーとしてwsを使用し、クライアントではネイティブのWebSocketsを使用します。

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'),
  },
};