TypeScriptの環境構築をWebpackでする際のメモ

バックエンドも含めて、JSの勢いが凄いなと思っていたら、
新しい技術やライブラリはJSから出てくることがよくわかった。
AWSとか、OpenAIとかで、JSしかSDKが出ていないものが割と多い。

そんなこともあり、TypeScriptをかじってみることにした。
Webpackで環境構築をしたので、
そのメモとして、package.jsonは以下の通り

{
  "name": "typescript_prac",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.5.2",
    "typescript": "^5.7.3",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.0"
  }
}

特に手間がかかり、今回メモにしておこうと思ったのが、
webpack.config.js ですね。

module.exports = {
  entry: {
    bundle: "./src/index.ts",
  },
  output: {
    path: `${__dirname}/dist`,
    filename: "[name].js",
  },
  mode: "development",
  resolve: {
    extensions: [".ts", ".js"],
  },
  devServer: {
    static: {
      directory: `${__dirname/dist}`,
    },
    //ブラウザを自動で開く
    open: true,
  },
  module: {
    rule: [
      {
        test: /\.ts$/,
        loarder: "ts-loader",
      },
    ],
  },
};

個人的には、Viteの方が好きだけど、
複雑な依存関係があった場合は、Webpackのが安定するらしい。

余談として、TSでコンパイルエラーが出ても、
JSファイルが出力されて、
それを実行した時にエラー出ないのは、仕様上、仕方ないけれど、
ちょっと安全性の担保が微妙だなと。

ただ、TSは汎用性が半端なく、
クラウドやAIとの相性も抜群なので、
練習しなきゃ新時代に置いてかれるらしいです。