作成日:  (更新日: )

webpack + TypeScript を使用する例

このページでは、webpack (4系) で TypeScript を使用する例を説明します。

前提

この手順で前提としているライブラリ等とバージョンは下記のとおりです。

ライブラリ等 バージョン
node.js v10.13.0 / v12.0.0
typescript 3.4.5
webpack 4.30.0
webpack-cli 3.3.1
ts-loader 5.4.4

手順

node.js のインストール (インストールしていない場合)

node.js をインストールしていなければインストールします。

※ Windows の場合、 公式サイト からインストーラをダウンロードしてインストールします。新しい機能を使いたい場合は「最新版」、安定版を使いたい場合は「LTS」を使用してください。

package.json の準備 (npm init -y)

作業したいフォルダ上で npm init -y コマンドを実行します。(下記のような内容の package.json が生成されます。必要な場合は、あとで package.json を直接編集できます)

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack, TypeScript と関連ライブラリのインストール

作業したいフォルダ上で npm install --save-dev webpack webpack-cli typescript ts-loader コマンドを実行して必要なライブラリを導入します。

※ TypeScript はもともとインストール (npm install -g typescript 等) しているものがあればそちらを使っていいと思うのですが、その場合 npx webpack 時に下記のようなエラーが発生するかもしれません。 
ERROR in ./app.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: Cannot find module 'typescript'
略

webpack.config.js の作成

作業フォルダ直下に webpack.config.js ファイルを作成し、下記の内容を記載します。 (ts-loader のREADMEに記載のあるものと同じものを転記しています)

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: "./app.ts",
  output: {
    filename: "bundle.js"
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

※入力元 (entry)、出力先 (output) のファイル名は必要に応じて変更してください。

tsconfig.json の準備 (tsc --init)

作業したいフォルダ上で tsc --init コマンドを実行します。(下記のような内容の tsconfig.json ファイルが生成されます。必要な場合は内容を変更します)

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */

    // ... 略 ...

  }
}

tsconfig.json の内容のうち、"sourceMap": true のコメント (//) を外して有効にします。(デバッグ用)

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */

    // ... 略 ...

  }
}

TypeScript ファイルの作成

実行したいプログラムを作成します。(webpack.config.js の entry に設定したファイル。今回は app.ts)

let message : string = "こんにちは！";
console.log(message);

webpack の実行と確認

npx webpack コマンドで、出力先ファイル (前述の webpack.config.js の output に指定したファイル。今回の例だと bundle.js) にファイルが生成されるか確認します。

問題なくファイルが生成されていれば完了です。最終的なフォルダ構成は下記になります。

作業フォルダ
│  app.ts (自分で作成した TypeScript ファイル)
│  package-lock.json (npm install ... で生成)
│  package.json (npm init -y で生成)
│  tsconfig.json (tsc --init で生成)
│  webpack.config.js (「webpack.config.js の作成」で作成したファイル)
│  
└─dist
        bundle.js (npx webpack で生成されたファイル)

その他

更新履歴

  • 2019/05/01 全体的に内容を再構成しました。また、webpack 4 系など各ライブラリの最新で動作確認を行いました。
  • 2017/07/21 初版