webpack 打包ts代码

 webpack.config.js

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")

const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports={
    entry : "./src/index.ts",
    output : {
        path : path.resolve(__dirname,"dist"),
        filename : "bundle.js",
        environment : {
            // arrowFunction : false,
        }
    },
    module : {
        rules : [
            {
                test : /\.ts$/,
                use : [
                    {
                        //指定加载器
                        loader : "babel-loader",
                        options : {
                            presets : [
                                [
                                    //浏览器环境配置插件
                                    "@babel/preset-env",
                                    //配置信息
                                    {
                                        //要兼容的目标浏览器
                                        targets : {
                                            chrome : "60",
                                            firefox : "50",
                                            ie : "9",
                                            safari : "10",
                                            edge : "17"
                                        },
                                        //让旧版浏览器运行corejs3.0内核
                                        "corejs" : "3",
                                        // //使用corejs方式，usage：按需加载
                                        "useBuiltIns" : "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    "ts-loader"
                ],
                exclude : /node_modules/
            }
        ]
    },
    plugins : [
        //删除上一次编译的所有文件，重新编译
        new CleanWebpackPlugin(),
        //自动生成html文件
        new HtmlWebpackPlugin({
            //title : "自定义"
            template : "./src/index.html"   //指定模板
        }),
    ],    mode : "production",
    resolve : {
        //让文件识别引入的ts模块,js模块
        extensions : [".ts",".js"]
    }
}

package.json

{
  "name": "ts1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "babel-loader": "^8.2.3",
    "core-js": "^3.19.1",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.2",
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0"
  },
  "dependencies": {
    "D": "^1.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es2015",
        "strict" : true
    }
}