webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

定数パス = require("パス");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

モジュール.エクスポート = {
   最適化：
       最小化: false // コード圧縮をオフにする（オプション）},

   エントリ: "./src/index.ts",

   開発ツール: "インラインソースマップ",

   開発サーバー: {
       コンテンツベース: './dist'
   },

   出力: {
       パス: path.resolve(__dirname, "dist"),
       ファイル名: "bundle.js",
       環境：
           arrowFunction: false // webpack の矢印関数をオフにします (オプション)}
   },

   解決する： {
       拡張子: [".ts", ".js"]
   },

   モジュール: {
       ルール:
           {
               テスト: /\.ts$/,
               使用： {
                   ローダー: "ts-loader"     
               },
               除外: /node_modules/
           }
       ]
   },

   プラグイン: [
       新しい CleanWebpackPlugin()、
       新しいHtmlWebpackプラグイン({
           タイトル:「TSテスト」
       }）、
   ]
}

{
   "コンパイラオプション": {
       "ターゲット": "ES2015",
       "モジュール": "ES2015",
       "厳密": 真
   }
}

{
   ...
   「スクリプト」: {
       "test": "echo \"エラー: テストが指定されていません\" && exit 1",
       「ビルド」:「webpack」、
       "開始": "webpack サーブ --open chrome.exe"
   },
   ...
}

npm i -D @babel/core @babel/preset-env babel-loader core-js

モジュール: {
    ルール:
        {
            テスト: /\.ts$/,
            使用： [
                {
                    ローダー: "babel-loader",
                    オプション:{
                        プリセット: [
                            [
                                "@babel/プリセット環境",
                                {
                                    「ターゲット」:{
                                        "クローム": "58",
                                        "つまり": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "使用方法"
                                }
                            ]
                        ]
                    }
                },
                {
                    ローダー: "ts-loader",
                }
            ]、
            除外: /node_modules/
        }
    ]
}