Webpack erstellt ein Gerüst zum Verpacken von TypeScript-Code

npm ich -D

// Ein Paket importieren const path = require("path")

//Paket zur automatischen HTML-Generierung einführen const HtmlWebpackPlugin = require("html-webpack-plugin")

//Führen Sie das Plugin ein, um die Dist-Datei zu aktualisieren const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// Alle Konfigurationsinformationen in Webpack sollten in moudle.exportsmodule.exports={ geschrieben werden.
    //Geben Sie den Eintrag der Eintragsdatei an: "./src/index.ts",
    //Geben Sie das Verzeichnis an, in dem sich die gepackte Datei befindet. Ausgabe:{
        //Geben Sie den Verzeichnispfad der gepackten Datei an:path.resolve(__dirname,"dist"),
        //Geben Sie den Dateinamen der gepackten Datei an: „bundle.js“,
        //Verwenden Sie beim Kompilieren der Umgebung keine Pfeilfunktionen: {
            Pfeilfunktion: false
        }
    },
    
    //Webpack muss beim Verpacken ein Modul verwenden.module:{
        //Geben Sie die zu ladenden Regeln an:[{
            // test gibt die Datei test:/\.ts$/ an, in der die Regel wirksam wird.
            // use ist der zu verwendende Loader
            //Babel konfigurieren
            verwenden:[
                {//Loader angeben loader: "babel-loader",
                    Optionen: {
                        //Die vordefinierten Umgebungsvorgaben festlegen:[
                            [
                                //Geben Sie das Umgebungs-Plugin "@babel/preset-env" an,
                                //Konfigurationsinformationen {
                                    //Browserziele, die kompatibel sein müssen:{
                                        "Chrom": "88"
                                    },
                                    //Geben Sie die CoreJS-Version an "corejs":"3",
                                    // bedeutet Laden bei Bedarf "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                „ts-loader“
            ],
            //Dateien festlegen, die nicht gepackt und hochgeladen wurden, ausschließen: ["/node_modules/"]
        }]
    },
    
    // Webpack-Plugins konfigurieren:[
        neues HtmlWebpackPlugin({
            // Benutzerdefinierte HTML-Vorlage für die Adressvorlage: "./src/index.html"
        }),
        //Jedes Mal vor dem Verpacken und Starten werden die Dateien in dist automatisch gelöscht. So generieren Sie die neuesten Dateien neu: new CleanWebpackPlugin()
    ],
    
    lösen:{
        //Lösen Sie das Fehlerproblem, wenn andere TS-Pakete separat in die TS-Dateierweiterungen eingeführt werden: ['.ts', '.js']
    }
}