npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm i -D webpack webpack-cli typescript ts-loader

//引入一個(gè)包
const path = require('path')

//webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件所在目錄
    output: {
        //指定打包文件的目錄
        path: path.resolve(__dirname, 'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包時(shí)使用的模塊
    module: {
        //指定要加載的規(guī)則
        rules: [
            {
                //test 指定規(guī)則生效的文件，以下匹配以 ts 結(jié)尾的文件
                test:/\.ts$/,
                //要使用的loader，用 ts-loader 處理以 ts 結(jié)尾的文件
                use: 'ts-loader',
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    }
};

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

 "build": "webpack"

function sum(a:number,b:number):number{
    return a+b;
}

console.log(sum(11,22));

//引入一個(gè)包
......
//引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin")

//webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中
module.exports = {
    ......

    //配置webpack插件
    plugins: [
        new HTMLWebpackPlugin(),
    ]
};

	//配置webpack插件
    plugins: [
        new HTMLWebpackPlugin({
            title: "自定義標(biāo)題"
        }),
    ]

	plugins: [
        new HTMLWebpackPlugin({
            template: "./src/index.html"
        }),
    ]

cnpm i -D clean-webpack-plugin

//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

 //配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        ......
    ],

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

......

//webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件所在目錄
    output: {
        ......
        //告訴webpack不使用箭頭函數(shù)
        environment: {
            arrowFunction: false
        }
    },
    //指定webpack打包時(shí)使用的模塊
    module: {
        //指定要加載的規(guī)則
        rules: [
            {
                //test 指定規(guī)則生效的文件，以下匹配以 ts 結(jié)尾的文件
                test:/\.ts$/,
                //要使用的loader，用 ts-loader 處理以 ts 結(jié)尾的文件
                use: [
                    //配置babel
                    {
                        //指定加載器
                        loader:'babel-loader',
                        //設(shè)置 babel
                        options: {
                            //設(shè)置預(yù)定義的環(huán)境
                            presets:[
                                //指定環(huán)境插件
                                '@babel/preset-env',
                                //配置信息
                                {
                                    //要兼容的目標(biāo)瀏覽器
                                    targets:{
                                        "chrome":88
                                    },
                                    //指定corejs版本
                                    "corejs":"3",
                                    //使用corejs的方式 usage表示按需加載
                                    "useBuiltIns":"usage",
                                }
                            ]
                        }
                    },
                    'ts-loader'
                ],
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    },

    ......
};

 resolve: {
        extensions: ['.ts','.js']
    }