Webpack dev-server で root になる URL を変更したい

TL;DR

GitHub page で host されてる webサイトが webpack dev-server を使って開発されていたのですが、実際のサイトの URL は example.giyhub.io/repo_name/ だけど、開発環境が localhost/ で root のパスが異なっていて / 始まりのパスが使えず不便だったので、 webpack dev-server を本番環境と同じ localhost/repo_name/ が root になるようにしてみたのでメモ。

contentBasePublicPath オプションを使って webpack dev-server の root 扱いになる URL を変更する

devServer.contentBasePublicPath
Tell the server at what URL to serve devServer.contentBase static content. If there was a file assets/manifest.json, it would be served at /serve-content-base-at-this-url/manifest.json
ref. devServer.contentBasePublicPath DevServer | webpack

devServer.contentBasePublicPath: ルートになるディレクトリ名 と指定すればOK
今回は仮に localhost/repo_name/ をルートにしたいとします。

webpack.config.js

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, '/'),
    contentBasePublicPath: '/repo_name',
  }
};

これで webpack.config.js のある階層が localhost/repo_name/ として扱われるようになりました！
₍ ᐢ. ̫ .ᐢ ₎👌 やったね！

dev-server 起動時に `localhost/repo_name` を開くようにする

このままだと $ npm run webpack-dev-server --open としても localhost/ が開いてしまい都度URLに /repo_name を足さないとでメンドーなので --open した時は自動的に localhost/repo_name/ が開くようにします。

devServer.openPage オプションにデフォルトで開くパスを指定する

webpack.config.js

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, '/'),
    contentBasePublicPath: '/repo_name',
    openPage: 'repo_name',
  }
};

ドキュメントには / 始まりのパスが書かれていたのですが、自分の触っていた環境では openPage: '/repo_name' とすると localhost//repo_name/ が開いてしまい上手く動作しなかったので、/ 無しで指定しました。
これは他の設定が原因である可能性も高いので、参考にされる場合は適時調整してください。