webpack打包TS代码

下载依赖：

typescript

ts-loader
webpack
webpack-cli

html-webpack-plugin
clean-webpack-plugin

@babel/core babel核心库
@babel/preset-env //babel预定义环境（兼容各种浏览器）
babel-loader
core-js //模拟js

创建webpack.config.js

const path = require('path');
//引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    //入口文件
    entry: './src/index.ts',
    //模式
    mode:'development',
    context: path.resolve(__dirname),
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        //打包后的文件名
        filename: 'bundle.js',
        //告诉webpack 不使用箭头函数
        environment:{
            arrowFunction:false
        }
    },
    //指定webpage打包是要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test指定规则生效的文件
                test:/\.ts$/,
                //要使用的loader,use的执行顺序是 从下往上
                use:[
                    {
                        //指定加载器
                        loader:'babel-loader',
                        //设置babel
                        options:{
                            //设定预定义环境
                            presets:[
                                [
                                    //指定环境的插件
                                    '@babel/preset-env',
                                    //配置信息
                                    {
                                        //要兼容的目标浏览器
                                        targets:{
                                            "chrome":"88",
                                            "ie":'8'
                                        },
                                        //指定corejs的版本 处理类似Promise这种特殊的类
                                        "corejs":"3",
                                        //使用corejs的方式“usage”表示按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                //要排除的文件
                exclude:/node_modules/
            }
        ]
    },
    //后缀
    resolve: {
        extensions:['.ts,','.js']
    },
    // devtool: 'source-map',
    //配置webapck插件
    plugins: [
        new HtmlWebpackPlugin({
            title:'自定义title',
            //html模版
            template:"./src/index.html"
        }),
        //更新打包后文件，删除修改项
        new CleanWebpackPlugin()
    ]
};

创建ts配置文件tsconfig.json

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