【簡単】typescript + webpack で github pages にホストする

【簡単】TypeScript + webpack で GitHub pages にホストする

プログラミング

2024.05.04

自分の作ったものを簡単に誰でも触れるよう、github pagesにホストしたい。。

ポートフォリオ作りのために、github pagesに作品を載せたい。。

というわけで、typescript + webpackを使ってgithub pagesにホストした流れをシェアできればと思います。

これであなたも簡単に作品をgithub pagesにホストできる！

環境

すでに環境構築したパッケージをテンプレートリポジトリとして作成しました。

Use this template ボタンで、テンプレートとして新規リポジトリを作成することができます！

以下に、各設定ファイルの説明を書きます。

package.jsonには、アプリの基本情報を書いていきます。

適宜更新しなくてはいけないのは、name, version, mainぐらいですかね。

typescriptの設定（コンパイルの設定であるcompilerOptionsなど）を書いていきます。

プロパティ	説明
target	どのjs versionでコンパイルするか
lib	使いたいtargetに欲しいライブラリがないときにライブラリを追加できる
module	コンパイルされるjsがどのようにモジュールを読み込むか。バックエンならばcommonjs フロントエンドならばes2020
outDir	コンパイルされるjsの出力用ディレクトリ
forceConsistentCasingInFileNames	大文字小文字をしっかり区別するか基本trueがいいらしい
strict	strict type checkingを有効にするか jsの書き方ルール
noImplicitAny	any typeはwarningを出すか
skipLibCheck	ライブラリの型チェックを飛ばすか依存が多い場合に、コンパイル時間が減るらしいけど、必要かどうかは要検討

webpackの設定を書いていきます。

プロパティ	説明
mode	production or developmentで選ぶことが可能 developmentにするとデバッグサーバの設定ができる
devtool	sourcemapを指定すると、デバッグ用のソースマップも出力してくれる
devServer	`yarn run serve`で走らせるデバッグサーバの設定バンドルの出力先を設定する
entry	エントリーファイルを追加
output	バンドルの出力先
module>rules	loaderの指定をする webpackはjsファイルをバンドル化するものなので、js以外のファイルはloaderを使う必要がある
resolve.extensions	import時に、拡張子無しでも解決(import)ができる設定。 (/) `import * from "abc.ts"` `() import * from "abc"` バンドル化したいファイルの拡張子を追加するべし。`js`, `ts`, `tsx`
plugins	Pluginを設定。 MiniCssExtractPlugin: CSSをバンドルではなく、ファイルとして出力 HtmlWebpackPlugin: index.htmlをファイルとして出力してくれる。依存関係なども解決してくれる。 CopyPlugin: ファイルなどを出力先にコピペしてくれる。