Typescript/開発環境

npmの初期化
npm init

関連パッケージのインストール
npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server

webpack.config.jsの作成と設定

tsc --init
	
webpack.config.js
const path = require('path');
module.exports = {
  // モジュールバンドルを行う起点となるファイルの指定
  // 指定できる値としては、ファイル名の文字列や、それを並べた配列やオブジェクト
  // 下記はオブジェクトとして指定した例
  entry: {
    bundle: './src/index.ts'
  },
  // モジュールバンドルを行った結果を出力する場所やファイル名の指定
  output: {
    path: path.join(__dirname, 'dist'), // "__dirname"はファイルが存在するディレクトリ
    filename: '[name].js'  // [name]はentryで記述した名前(この設定ならbundle)
  },
  // import文でファイル拡張子を書かずに名前解決するための設定
  // 例...「import World from './world'」と記述すると"world.ts"という名前のファイルをモジュールとして探す
  resolve: {
    extensions:['.ts','.js'] // Reactの.tsxや.jsxの拡張子も扱いたい場合は配列内に追加する
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // webpack-dev-serverの公開フォルダ
    open: true // サーバー起動時にブラウザを開く
  },
  // モジュールに適用するルールの設定(ローダーの設定を行う事が多い)
  module: {
    rules: [
      {
        // 拡張子が.tsのファイルに対してTypeScriptコンパイラを適用する
        // Reactで用いる.tsxの拡張子にも適用する場合は test:/\.(ts|tsx)$/,
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
}
package.json
"scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-cli serve --mode development"
  },