これまで webpack を使うようなときは webpack したものをサーブするサーバがすでにあるのでそこの静的ファイル置き場に置いていました
ただ自分で webpack の設定を書いたりせずにデフォルトで色々用意してくれてるツールを使うと内部的に webpack dev server が使われていたりします
たまには直接使ってみようかと思って 今更ながら使ってみることにしました

準備

まずは dev server を使わないシンプルな webpack 環境を作ります
babel は入れません

適当なフォルダを作って webpack と webpack-cli をインストールします

yarn add webpack webpack-cli

webpack.config.js は entry と output だけ書いておきます

[webpack.config.js]

module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "output.js",
		path: __dirname + "/dist",
	},
}

webpack 対象のコードですが index.js と print.js だけの 2 ファイルにしました

[src/index.js]

import print from "./print.js"

print("a")

[src/print.js]

export default (text) => {
	document.body.textContent = text
}

print.js では body にテキストをセットするだけの関数を export して index.js で "a" を引数に渡します
動かせばページに "a" だけ表示されるはずです

これを webpack します

yarn webpack

mode の指定がないので production 扱いで dist フォルダに output.js が作られます
動かすために dist/index.html を作ります

[dist/index.html]

<script defer src="output.js"></script>

dist/index.html を開くと "a" と表示されていますね

webpack dev server

これに webpack dev server を追加します

yarn add webpack-dev-server

サーバの起動は webpack-dev-server コマンドです

yarn webpack-dev-server

色々メッセージが出ますが 最初の方にこういうのがでてるはずです

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\tmp\3201\wpds\

「http://localhost:8080/」 でサーバが起動してるということがわかります
ポートの 8080 は config ファイルや cli オプションで変更できます

その次のメッセージの通り output で出力されたページを確認できます

http://localhost:8080/output

HTML ファイルは自動で生成されたものです
このページでは live reload 機能がついています

index.js を編集して

print("abcd")

にするとページの表示が自動で "abcd" に変わりますし

print.js を編集して

document.body.textContent = text + "!"

にするとページの表示が "abcd!" に変わります

また 3 行目にあるように webpack で生成したもの以外のファイルもサーブされています
サーバの / にアクセスするとインデックスページがあって src や dist フォルダ見えています
/dist/ を開けば さっき作った dist/index.html を開くことができます
こっちは事前にビルドした live reload とかの機能がないものなので間違えてこっちを開くと src を更新しても何も起きません

最初に webpack を実行したときは production でしたが こっちは dev server なので development として webpack されます

proxy

ブラウザのみで完結するならこれでいいのですが サーバと通信する場合に dev server だと困ります
ですが そういうところも dev server では完備されていて proxy 機能があります
特定の URL へのリクエストの場合は設定された proxy 先のサーバへリクエストを送ります

設定は webpack.config.js で行います
devServer プロパティに dev server の設定を書きます

module.exports = {
	entry: "./src/index.js",
	output: {
		filename: "output.js",
		path: __dirname + "/dist",
	},
	devServer: {
		proxy: {
			"/api": "http://localhost:8090",
		},
	},
}

これだと /api へのアクセスは localhost:8090 へプロキシされます

ポート 8090 をリッスンするサーバはこれとします

const Koa = require("koa")

const app = new Koa()

app.use((ctx, next) => {
	if (ctx.path === "/api/foo") ctx.body = { status: "OK" }
	if (ctx.path === "/api/cookie") {
		const c = ~~ctx.cookies.get("count")
		ctx.body = { count: c }
		ctx.cookies.set("count", c + 1)
	}
})

app.listen(8090)

http://localhost:8090/api/foo
http://localhost:8090/api/cookie

に api を用意しています

foo は { status:"OK" } を固定で返します
cookie は { count: 1 } のようなレスポンスで cookie に状態を保存し アクセスのたびにカウントアップします

アクセスできることを確認したら dev server の同じパスの

http://localhost:8080/api/foo
http://localhost:8080/api/cookie

にもアクセスしてみます
同じようにレスポンスを取得できるはずです

ちょっとうれしいことに cookie は origin 単位ではないので ポートが違っても localhost など同じドメインなら cookie の値を引き継げます
サーバ側を作っていてログインしたり cookie にデータがセットされている状態で クライアント側を作ろうとしたときに dev server を通しても同じログイン状態が引き継げるのは便利ですね

また 今回は同じ path にしましたが proxy は細かく設定できてプロキシ先の path を書き換えることもできます
ダミー用のサーバだったりで 本来アクセスする予定の API とは違う path になる場合でも大丈夫です