TS学习之webpack打包ts代码

webpack.config.js文件设置记录

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // 不使用箭头函数
        environment:{
            arrowFunction:false
        }
    },
    module: {
        rules: [{
            test: /\.ts$/,
            use: [{
                    // 指定加载器
                    loader: 'babel-loader',
                    // 设置babel
                    options: {
                        // 设置预定义的幻境
                        presets: [
                            [
                                // 指定环境插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器
                                    targets: {
                                        "chrome": "88"
                                    },
                                    // 指定core-js的版本
                                    "core-js": "3",
                                    // 使用corejs的方式，"usage" 表示按需加载
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ],
        }]
    },
    plugins: [new HTMLWebpackPlugin({
        title: 'ts-webpack',
        template: './public/index.html',
        filename: 'index.html',
        inject: true
    })],
    
    // 设置引用模块
    resolve:['.ts','.js']
}

tsconfig.json文件配置记录

{
/*
    include 用来指定哪些ts文件需要被编译
        路径： ** 表示任意目录
                * 表示任意文件
    exclude 表示不需要被编译的文件目录
*/
    "include": ["./src/**/*"],
    "exclude": [],
    "compilerOptions": {
        // target 用来指定TS编译后的js版本
        "target":"ES6",
        // module 指定要使用的模块化的规范
        "module": "es2015",
        // lib 用来指定项目中要用到的库
        // "lib": [],
        // outDir 用来指定编译后文件的所在目录
        "outDir": "./dist",
        // outFile 将代码合并为一个文件
        // "outFile": "./dist/index.js",
        // allowJS 是否对JS进行编译
        "allowJs": true,
        // 检查JS代码是否符合规范
        "checkJs": false,
        // 是否移除注释
        "removeComments": false,
        // 不生成编译后的文件
        "noEmit": false,
        // 当有错误时 不生成编译后的文件
        "noEmitOnError": true,

        // 语法检查选项

        // 所有严格检查的总开关,为true时下面选择全为true,flase同样
        "strict": false,
        // 用来设置编译后的文件是否使用严格模式，默认false
        "alwaysStrict": false,
        // 不允许隐式的any类型
        "noImplicitAny": false,
        // 不允许不明确类型的this
        "noImplicitThis": false,
        // 严格检查空值
        "strictNullChecks": false,
        
    }
}