WebpackはTypeScriptコードをパッケージ化するためのスキャフォールディングを構築します

npm i -D

// パッケージをインポートする const path = require("path")

//HTML を自動生成するためのパッケージを導入します const HtmlWebpackPlugin = require("html-webpack-plugin")

//dist ファイルを更新するためのプラグインを導入します const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack のすべての設定情報は、moudle.exportsmodule.exports={ に書き込む必要があります。
    //エントリファイルエントリを指定します: "./src/index.ts",
    //パッケージ化されたファイルが配置されているディレクトリを指定します。出力:{
        //パッケージ化されたファイルのディレクトリパスを指定します:path.resolve(__dirname,"dist"),
        //パッケージ化されたファイルのファイル名を指定します: "bundle.js",
        //コンパイル時に矢印関数を使用しない環境: {
            矢印関数: false
        }
    },
    
    //Webpack はパッケージ化時にモジュールを使用する必要があります。module:{
        //ロードするルールを指定します:[{
            // test はルールが適用されるファイル test:/\.ts$/ を指定します。
            // use は使用するローダーです
            //Babelを設定する
            使用：[
                //ローダーを指定する loader: "babel-loader",
                    オプション:{
                        //定義済みの環境プリセットを設定します:[
                            [
                                //環境プラグイン「@babel/preset-env」を指定します。
                                //設定情報{
                                    //互換性のあるブラウザターゲット:{
                                        "クローム":"88"
                                    },
                                    //corejsのバージョンを指定します "corejs":"3",
                                    // オンデマンドでロードすることを意味します "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ]、
            //パッケージ化およびアップロードされないファイルを設定します exclude: ["/node_modules/"]
        }]
    },
    
    // webpackプラグインを設定する:[
        新しいHtmlWebpackプラグイン({
            // カスタム HTML テンプレート アドレス テンプレート: "./src/index.html"
        }）、
        // パッケージ化と起動の前に、dist 内のファイルは自動的にクリアされます。最新のファイルを再生成する方法 new CleanWebpackPlugin()
    ]、
    
    解決する：{
        //tsファイル拡張子:['.ts','.js']に他のtsパッケージを個別に導入する場合のエラーの問題を解決します
    }
}