TypeScript + webpack5の環境構築メモ

まずはnpmモジュールのインストール

プロジェクトのディレクトリに移動してコマンドを入力！

$ npm i -D webpack webpack-cli webpack-dev-server webpack-merge typescript ts-loader

コマンド入力後TypeScriptの設定ファイル、tsconfig.jsonをプロジェクトのルートに作成。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

tsconfigの説明は下記。

compilerOptions: { // コンパイルする際のオプションを記載する
    module: 出力するjsのモジュールで、何を使用するか指定(ex. CommonJS)
    target: コンパイルするjsのバージョン
    outDir: jsファイルを出力するディレクトリ
    sourceMap: ソースマップファイル有無
    strict: 厳密な型チェック
},
include: [コンパイルに含めるファイルと一致するパターンを記述]
exclude: [コンパイルから除外するファイルパターンを記述]

次は、webpackの設定ファイル「webpack.common.js」を作成

const path = require('path');

module.exports = {
  entry: {
    app: './src/index.ts',
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: '[name].js'
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
      },
    ],
  },
  resolve: {
    extensions: [
      '.ts'
    ],
  },
};

次は、開発用のwebpackの設定ファイル「webpack.dev.js」を作成

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
  },
});

ほいで、webpackの本番用の設定ファイル「webpack.prod.js」を作成

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map'
});

package.jsonにこちらを追記

"scripts": {
    "start": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },

ではsrc/index.tsファイルを作り下記を記載

const text: string = 'test';
console.log(text);

では動作確認！

$ npm run build

dist/app.jsができていました。結果は！！

(()=>{"use strict";console.log("test")})();
//# sourceMappingURL=app.js.map

コンパイルがしっかりできていました！

以上です。