Ownedmedia ウェブ制作に役立つコンテンツを発信中!

webpack 2020.04.28

webpackでTypeScriptの自動コンパイル環境を作成してみる

Tags: ,,,,

過去記事「TypeScriptの導入・コンパイルと設定ファイルtsconfig.jsonを触ってみる」では、TypeScriptの導入からJavaScriptへコンパイルまでの流れをまとめていましたが、コマンドラインでの操作であったため実際の開発においては現実的ではありませんでした。そこで今回は実際の開発時に使えるようにwebpackを使ったTypeScriptのコンパイル環境を構築してみたいと思います。

 

webpackとTypeScriptのパッケージをインストール

まずはnpm経由で必要なパッケージをインストールしていきます。ここではwebpackに関するパッケージとTypeScriptに関するパッケージの合計5つをインストールする形になります。

$ npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

 

パッケージのインストールが完了すると、package.jsonのdevDependenciesに追加されているのが確認できます。また、この時に合わせてwebpackのビルドコマンドなども、scriptsに指定しておくと便利ですね。

【package.json】

{
 ....... 
 "scripts": { 
  "dev": "npx webpack-dev-server",
  "build": "npx webpack",
  "watch": "npx webpack --watch"
 },
 "devDependencies": {
  "ts-loader": "^7.0.0",
  "typescript": "^3.8.3",
  "webpack": "^4.42.1",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.10.3"
  .......
 }
}

 

今回はサンプルとして下記のようなファイル・ディレクトリの構成を用意しています。ソースファイルと出力用ファイルのディレクトリをそれぞれ分けておきます。そしてwebpackの設定ファイルである「webpack.config.js」とTypeScriptの設定ファイルである「tsconfig.json」も作成しておきます。

node_modules
dist
  ┗(main.js)
src
  ┣ index.ts
  ┗ modules
    ┗ module.ts
webpack.config.js
tsconfig.json

 

 

webpackとTypeScriptの設定ファイルを作成

まずは、webpackの設定ファイルである「webpack.config.js」を下記のように作成します。過去記事「webpack-dev-serverでローカルサーバーと自動更新させてwebpackのファイル変更を検知する」でまとめているものとおおよそ同じですが、今回はTypeScriptのコンパイルになりますので、エントリーポイントを該当するTypeScriptファイルに指定します。また、TypeScriptのコンパイルに「ts-loader」を使うことになるので、その設定も合わせて行います。また、コンパイル時のエラーを避けるためには、resolveの値にはjsとtsの拡張子を指定しておくことも重要になります。

【webpack.config.js】

module.exports = {
 mode: 'development',
 entry: './src/index.ts',
 output: {
  path: `${__dirname}/dist`,
  filename: 'main.js'
 },
 module: {
  rules: [
   {
    test: /.ts$/,
    use: 'ts-loader'
   }
  ]
 },
 resolve: {
  extensions: [
   '.ts', '.js'
  ]
 },
 devServer: {
  contentBase: `${__dirname}/dist`,
  port: 8080,
  open: true
 }
}

 

続けて、TypeScriptの設定ファイルである「tsconfig.json」も下記の通り設定していきます。この内容について詳しくは過去記事「TypeScriptの導入・コンパイルと設定ファイルtsconfig.jsonを触ってみる」でも紹介していますので、詳しくはこちらを参考にどうぞ。

【tsconfig.json】

{
 "include": [
  "src/**/*"
 ],
 "exclude": [
  "node_modules"
 ],
 "compilerOptions": {
  "incremental": true, 
  "target": "ES5",
  "module": "commonjs", 
  "sourceMap": true, 
  "removeComments": true,
  "strict": true,
  ..........
 }
}

 

これで、webpackを使ったTypeScriptのコンパイル環境が整いました。今回はサンプルとして下記のTypeScriptファイルを用意してコンパイルしてみようと思います。

【src/index.ts】

import moduleFunction from './modules/module';

console.log(moduleFunction('Hello World!'));

 

webpackでは複数のスクリプトファイルをバンドルできますので、モジュールとして読み込むTypeScriptファイルも用意しました。

【src/modules/module.ts】

export default function moduleFunction(message: string): string {
 return message;
}

 

これで実際にwebpackのビルドコマンドを実行してみます。問題なくビルドが実行されると出力先のディレクトリにJavaScriptファイルが生成されます。

$ npm run build

もしくは

$ npx webpack

 

コンパイルされたJavaScriptファイルを確認してみます。該当するTypeScriptファイルがコンパイルされているのが確認できますね。

【dist/main.js】

/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};

..................

/***/ "./src/index.ts":
/*!**********************!*
!*** ./src/index.ts ***!
**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

..................

/***/ "./src/modules/module.ts":
/*!*******************************!*
!*** ./src/modules/module.ts ***!
*******************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

 

実際の処理が問題なく行われるかも確認してみます。nodeコマンドでコンパイルされたファイルを実行してみますと、動作しているのがわかりますね。

$ node dist/main.js

Hello World!

 

 

監視モードとローカルサーバーで自動でコンパイルできるように

webpackのローカルサーバーと監視コマンドを使うことで、TypeScriptファイルの編集があった場合に、自動でコンパイルされローカルサーバーが立ち上がり、ブラウザ上でも更新が確認できるようになります。package.jsonにコマンドをスクリプトとして記載していますので、下記のコマンドを実行するだけでOKです。

$ npm run dev

もしくは

$ npx webpack-dev-server

 

webpackには監視コマンドも揃っており、TypeScriptのコンパイル環境において、webpackを使うことでコンパイルの自動化などができるようになります。こうすることで、実際の開発においてもかなり使いやすくなるのではないでしょうか。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?