メモ記事とはいえなかなか書いてる時間がとれず一月以上の間が空いてしまった。FastAPIによるバックエンド実装からTypescriptとSASSによるフロントエンド実装の勉強に入った所、WebAssemblyとその有力言語のRustに興味が写ってしまい、そのあたりを勉強しながらフロントエンドに組み込む技術を調査していたら、Webpackという技術に突き当たった。
WebAssemblyとRustに関しては別の機会に書くとして、今回はWebpack。いままで何度か単語程度に見かけはしたが、なんとなくお腹一杯感でスルーしていたが、必要に応じて調べてみると目からウロコ的な技術だった。
従来の静的コンテンツ（ブラウザ側で処理をする所謂フロントエンド）は、HTMLベースでスタールシート（CSS）やJavascriptを必要に応じて読み込む形式だったが、Webpack化することで、大まかには一つのJavascriptにまとめられる。
例えば下記のようなindex.htmlでは
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- 省略 -->
<style type="text/css">
@import "/static/css/bootstrap-custom.css";
</style>
<script type="module">
import { Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip } from "/static/js/bootstrap.esm.js"
</script>
</head>
<body class="base">
<script type="module">
import {init} from "/static/js/app.js"
window.addEventListener("load", init());
</script>
</body>
</html>
6行目〜でbootstrapのカスタムスタイルシート（これは別途SASSでコンパイルしている）を読み込んで、その下9行目〜でbootstrap用のスクリプトをモジュールとして読み込んでいる。Bodyタグを読み込んだあとで14行目〜でシングルページアプリケーション用スクリプトapp.jsを読み込んでページロード完了後にinitを実行（window.addEventListener）。app.jsもTypescriptのソースから別途コンパイルしておりアプリケーションの規模によっては多くのモジュールに分かれてロードされる。
こういった構成のものが、Webpack化することで下記のように出来る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- 省略 -->
<script src="/static/dist/main.js"></script>
</head>
<body class="base">
</body>
</html>
6行目のmain.js を読み込むだけとなる。main.jsはWebpackによってコンパイルされたjavascriptで読み込むべきリソースが全てパック化された生成物となる。ソースファイルは一般にindex.jsとされ、下記のような内容となる
import '../scss/bootstrap-custom.scss';
import 'bootstrap/dist/js/bootstrap.esm.js';
import {init, build} from '../ts/app';
init();
window.addEventListener("load", () => {
build();
});
一行目でbootstrapのカスタムスタイルシートを読み込むが、ここではscssのソースファイルを直接インポートして、WebpackのプラグインでSassコンパイラを起動する。生成したスタイルシートをインポートすると呼び出し側のHTMLのHEADタグ内にSTYLEタグを生成して直接コーディングするため、CSSファイルは生成されない。
2行目はbootstrap用のスクリプトをインポート。4行目でシングルページアプリケーションスクリプトを読み込むが、これもTypescriptのソースを直接していして内部でコンパイラを起動している。また、従来構成と違って読み込んだ時点ではBODYタグが生成されていないため、DOM関連の初期化があると失敗する。DOM関連の初期化はloadイベントをトリガとして始めるよう工夫が必要。
とりあえず、Webpackを導入するとこうなるというだけのメモで、Webpackの具体的な設定などはまた別の機会に。