Webpack builds scaffolding to package TypeScript code

npm i -D

// Import a package const path = require("path")

//Introduce the package for automatically generating HTML const HtmlWebpackPlugin = require("html-webpack-plugin")

//Introduce the plugin to update the dist file const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// All configuration information in webpack should be written into moudle.exportsmodule.exports={
    //Specify the entry file entry: "./src/index.ts",
    //Specify the directory where the packaged file is located output:{
        //Specify the directory path of the packaged file:path.resolve(__dirname,"dist"),
        //Specify the file name of the packaged file: "bundle.js",
        //Do not use arrow functions when compiling environment: {
            arrowFunction: false
        }
    },
    
    //Webpack needs to use module when packaging.module:{
        //Specify the rules to load rules:[{
            // test specifies the file test:/\.ts$/ where the rule takes effect.
            // use is the loader to use
            //Configure babel
            use:[
                {//Specify loader loader: "babel-loader",
                    options:{
                        //Set the predefined environment presets:[
                            [
                                //Specify the environment plugin "@babel/preset-env",
                                //Configuration information {
                                    //Browser targets to be compatible:{
                                        "chrome":"88"
                                    },
                                    //Specify the corejs version "corejs":"3",
                                    // means loading on demand "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ],
            //Set files that are not packaged and uploaded exclude: ["/node_modules/"]
        }]
    },
    
    // Configure webpack plugins:[
        new HtmlWebpackPlugin({
            // Custom html template address template: "./src/index.html"
        }),
        //Each time before packaging and launching, the files in dist will be automatically cleared. How to regenerate the latest files new CleanWebpackPlugin()
    ],
    
    resolve:{
        //Solve the problem of error when introducing other ts packages separately in ts files extensions:['.ts','.js']
    }
}