WebpackでEjs、Scss、TypeScriptのバンドルを行う開発環境

M1 Macに対応しているLTS版の 16.13.0 を使います。 必要に応じてNode.jsのバージョン管理ツールを使ってください。

https://qiita.com/alice37th/items/989af6749264de50bb85

後述するWebP変換バッチを仕様する際には、Googleが配布しているユーティリティ の導入が必要です。 MacであればHomebrewから導入出来ます。

brew install webp

project.config.js に切り出してあります。多分あまり触ることはないです。

変更が有り得そうな箇所を下記に抜粋します。

• 環境ごとに異なる値、またはセキュアなトークン等を使う場合は環境に応じた.envファイルを作成してください
• .env.example以外はgitignoreされます
• 読み込み対象となるenvはコマンド一覧を参照ください
• 特定の環境のみ（かつその環境が全体から見て少数一部に限る）が違う、という場合は定数で切り分けするほうが低コストかもしれません
• .env.exampleはプロジェクト状況に応じて追記してください
  • その際、セキュアな情報はgitを介して共有すべきではありません

src/images配下のjpg、jpeg, pngを一括でWebPに変換します。 変換したファイルは${拡張子を含む元のファイル名}.webpとしてソースファイルと同一階層に出力されます。（拡張子違いで同一ファイル名があるとバッティングするため）

• ejsのモジュール・コンポーネントを利用した構築では、インデントを意図通りに揃えるのが非常に困難です。
• そのため、ビルド後のhtmlに対して整形をかけることで本番環境・納品時に整形し直したデータを作成出来るようにします。
  • あくまでビルドした静的なhtmlファイルのみ対象にするため、devサーバ経由での閲覧時点ではインデントなどは元の状態のままです。
• 整形ルールはeditorconfigに準じます。

devコマンドではwebpack-devサーバを起動した時点で読み込んだejsファイルを認識し、待ち受けします。 言い換えると、devコマンドからの起動後に作成・配置したEJSファイルについては、再実行して開発サーバを起動し直すまで存在を認識されません。 また、アンダースコアで始まるinclude partial用EJSファイルも同様です。

ちょっとどうにかしたいなとは思ってますが、現状は空でもEJSファイルを作成してから起動するか、都度devコマンドの再実行で対処してもらえればと思います。

scssファイル、エントリーポイントに登録されているtsファイルはejsコンパイル時に自動で挿入されるので、自分で指定する必要はありません。

一応tsのコンパイルターゲットはES5になってますが、関数のpolyfill等は自動で適応がされません。必要なら下記で必要なpolyfillのバンドルを生成するのがおすすめです。

https://polyfill.io/v3/url-builder/

tsファイルに以下を書けば一括でpolyfillが適当されますが、バンドルサイズが激増するのであまりオススメはしません。

import 'core-js';

どこまで対応するかは検討します。

マイナーリリースあたりまでの主要更新項目を記載します。 詳細はGithubのリリース情報を参照してください。