webpack打包ts代码配置

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',

    // 打包文件
    output: {
        // 指定打包后的目录
        path: path.resolve(__dirname, 'dist'),

        //打包后文件的名字
        filename: "bundle.js"
    },

    // 指定webpack打包时要是用的模块
    module: {
        // 指定要加载规则
        rules: [
            {
                // test指定规则生效的文件
                test: /\.ts$/,
                //要使用的loader
                use: "ts-loader",
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "自定义title"
            template: "./src/index.html"
        }),
    ],

    // 设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }
}