webpack.configをTypeScriptで書く #TypeScript

TypeScriptでフロント書く機会もちょっとずつ増えてきている感があります。きっとWebpackでバンドル、というのが一般的なのではないでしょうか。

上記参考記事にもありますが、Webpapckの設定ファイルを書いていると、バージョン1と2の両方の書き方を混在させることができて混乱の元です。いちいちここのセクションはどんなキー名だったっけ？配列だっけ？ハッシュだっけ？となってドキュメントを行ったり来たりすることが多いかと思います。

このWebpackの設定ファイルもTypeScriptならコード補完やエラーがあればすぐに指摘してくれてもっと快適なんだけどなぁ、と感じたことのある人はきっと少なくないと思います。

これが実は特に面倒なことをせずともできる、というのでやってみました。

ファイル構成はこんな感じです。

.
├── dist
├── node_modules
├── package.json
├── package-lock.json
├── src
│   └── app.ts
├── tsconfig.json
└── webpack.config.ts

npmパッケージのインストール

$ npm i -D webpack typescript ts-node ts-loader @types/webpack

ts-nodeがポイントです。これはTypeScriptコードを直接nodeで実行したりREPLできるツールです。
https://github.com/TypeStrong/ts-node

webpack.config.ts を用意

通常であれば、webpack.config.jsを用意するところですが、TypeScriptなので拡張子を.tsにします。
とりあえずシンプルにこんな感じにしてみました。

webpack.config.ts

import * as webpack from "webpack";
import * as path from "path";

const rules: webpack.NewUseRule[] = [
    {
        test: /\.ts$/,
        use: "ts-loader",
    }
]

const module: webpack.NewModule = {
    rules: rules
};

const config: webpack.Configuration = {
    entry: "./src/app.ts",
    output: {
        filename: "bundle.js",
        path: path.resolve(process.cwd() + "/dist")
    },
    module: module
};

export default config;

rulesやmoduleを切り出しているのは、Webpack2のフォーマットで書くことを明示するためです。試してみるとわかりますが、殆どの型がバージョン1の型にも対応させるためにユニオン型になっています。コード補完の恩恵を受けるためにも変数に切り出して宣言の際に型を明示させている、という次第です。

Hello World（TypeScript)

src/app.ts

class HelloWorld {
    say(): void {
        console.log(`Hello World!!`);
    }
}

let hw = new HelloWorld();
hw.say();

webpack実行

$ webpack

生成されたJSを実行

$ node dist/bundle.js

# => Hello World!!

ts-nodeを入れるのと、拡張子をTypeScriptにするだけです。あ、あとwebpackの定義ファイルも。

特にトリッキーなことをせずとも簡単にできてしまいます。

次にTypeScript案件をやるときはこうしよう、と思いました。
ま、一度完成させてしまえば、あとはそんなに手間ではないのでどうしてもTypeScriptじゃなきゃだめってことはないんですけど。