WebpackでTypeScript開発管理をしよう!

こんにちは。KOUKIです。

最近、TypeScriptを学び始めました。

TypeScriptは、JavaScriptを型付できる便利なもので、学んでおいて損はありません。

今日は、TypeScriptをWebpackで使う方法を記事にします。

Webpackとは

Webpackは、複数のファイルをバンドル、つまり「一つにまとめる」ことができるツールです。

また、ビルド自動化ツールでもあります。

Webpackの主なメリット

Webpackの設定

前提条件

Nodejsが必要なので、ダウンロードしてください。

私は、以下のバージョンのNodejsをインストールしています。

プロジェクトの作成

作業ディレクトリ(プロジェクト)を作成します。

NPMパッケージ初期化

以下のコマンドで、初期化処理を行います。

初期化に成功するとpackage.jsonが作成されます。

Webpackの必須モジュール追加

先ほど作成したpackage.jsonにWebpackに必要なモジュールを追加します。

インストールに成功すると、package.jsonが以下のように変わっているはずです。

追加したモジュールについて、補足を書いておきます。

モジュール名 説明
webpack webpack本体。複数のファイルを一つにバンドルする
webpack-cli webpackのコマンドをプロジェクトで実行する
webpack-dev-server 開発用のwebサーバー
typescript typescriptモジュール
ts-loader webpackがTypeScriptを変換するためのローダー

TypeScriptの設定ファイルの作成

以下のコマンドで、TypeScriptの設定ファイルを作成してください。

TypeScriptの設定ファイルの変更

TypeScriptの設定ファイルを下記のようにします。

webpack.config.jsファイルの作成

webpackの設定ファイルをtsconfig.jsonと同階層に作成します。

尚、ファイル名は、「webpack.config.js」でなければなりません。

webpack.config.jsの設定

webpackの設定を以下のようにします。

公式にも詳しく書いてあります。

Webpackの実行

Webpackを実行するために、package.jsonのscriptsにbuildコマンドを追加します。

ビルド用のファイルを作成します。

準備が整ったので、webpackを実行してみましょう。

コマンド実行に成功するとdistフォルダが作成されます。

webpack-dev-serverの設定

最後に、webpackから開発用のwebサーバーを起動できるようにします。

package.jsonのscriptsに以下の設定を追加してください。

startコマンドを追加しました。

以下のように実行します。

このコマンドの実行に成功すると「localhost:8080」にて、プロジェクトがスタートします。

確認のために、index.htmlを作成しましょう。

ブラウザから「localhost:8080」にアクセスします。

問題なく表示されているように見えますが、webpack.config.jsに追加の設定が必要です。

publicPathを追加しました。

webpack-dev-serverは、ファイルの変更等があればホットリロード(自動リロード)を走らせますが、デフォルトの設定では変更内容を反映しません。

そのため、上記の設定が必要になります。

開発モードの設定

webpack.config.jsに以下の設定を行います。

これは、開発中には設定しておきたいものです。

本番モードの設定

本番モードの設定もみてみましょう。

次のファイルを作成してください。

上記のファイル名は任意のものです。

また、distフォルダ配下のファイルを削除するパッケージを追加しておきましょう。

設定ファイルの中身は、以下のようにします。

package.jsonのbuildコマンドを修正します。

webpackは、デフォルトでは、webpack.config.jsファイルを読み込みますが、上記の様にconfigオプションにファイルを指定するとその設定ファイルを読み込むことが可能です。

以下のコマンドで、ビルドをしましょう。

おわりに

Webpackは、モジュールバンドラツールのうち、もっとも重要なツールだと思います。

プロジェクト規模が大きくなるとかなり重宝するはずです。

自己学習においてもガンガン取り入れるべきものだと思いますので、この記事が参考になればあ幸いです^^

関連記事

参考

設定ファイル

本記事で作成した設定ファイルをいかに貼り付けておきます。

package.json

package.jsonをnpm installすると依存関係のモジュールをインストールしてくれるので、便利です。

webpack.config.prod.js

webpack.config.js

tsconfig.json

必須コマンド