使用webpack打包ts代码的实现

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

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

//引入一个包
const path = require('path')

//webpack 中的所有配置都应该写在 module.exports 中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包时使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test 指定规则生效的文件，以下匹配以 ts 结尾的文件
                test:/\.ts$/,
                //要使用的loader，用 ts-loader 处理以 ts 结尾的文件
                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));

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

//webpack 中的所有配置都应该写在 module.exports 中
module.exports = {
    ......

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

	//配置webpack插件
    plugins: [
        new HTMLWebpackPlugin({
            title: "自定义标题"
        }),
    ]

	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 中的所有配置都应该写在 module.exports 中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件所在目录
    output: {
        ......
        //告诉webpack不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    //指定webpack打包时使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test 指定规则生效的文件，以下匹配以 ts 结尾的文件
                test:/\.ts$/,
                //要使用的loader，用 ts-loader 处理以 ts 结尾的文件
                use: [
                    //配置babel
                    {
                        //指定加载器
                        loader:'babel-loader',
                        //设置 babel
                        options: {
                            //设置预定义的环境
                            presets:[
                                //指定环境插件
                                '@babel/preset-env',
                                //配置信息
                                {
                                    //要兼容的目标浏览器
                                    targets:{
                                        "chrome":88
                                    },
                                    //指定corejs版本
                                    "corejs":"3",
                                    //使用corejs的方式 usage表示按需加载
                                    "useBuiltIns":"usage",
                                }
                            ]
                        }
                    },
                    'ts-loader'
                ],
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    },

    ......
};

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