webpackでts(vuejs)をバンドルする

typescriptで記述したvuejsの定義を、webpackで個別にビルドしてアウトプットする方法を紹介します。

サンプルプロジェクトはこちらです。

サンプルコード

package.json

以下の通りvue, webpack, dotenv-webpackあたりをインストールしておく。

webpack.config.js

entry:とoutput:の定義で、entry側で対象ディレクトリ配下(./src/main/vue-client/pages)に含まれるtsファイルをバンドルする構成とする。

バンドル対象のtsと対となるjsをアウトプット定義(output:)で指定した階層に出力する。

その他、resolve:はts側でinclude定義する際の省略定義を、module:は各拡張子において対応するローダーの定義をする。

バンドル(コンパイル)される対象のtsと関連リソース

webpack.config.jsで定義されているinput指定した階層配下のリソース郡。

page階層配下に存在するtsファイルから参照されるものがバンドル対象となる。

例として、top.ts, use-top.tsだと以下の定義になる。

top.ts

use-top.ts

ビルド実施

実際にpackage.jsonでscript定義を行っているコマンドを叩きbuildしてみる。

ビルド成果物確認