ts基础配置npminit-y初始化项目全局安装ts：npminstalltypescript-g创建ts配置项：tsc

npm init -y 初始化项目
全局安装ts：npm install typescript -g
创建ts配置项：tsc -- init 生成ts配置文件

先写一个ts文件，在根目录下创建src文件夹，在src下创建index.ts

    let str:string='hello world'

在命令后输入 tsc ./src/index.ts 就自动编译出index.js
配置构建工具，安装webpack,webpack-cli,webpack-dev-server

    npm i webpack webpack-cli webpack-dev-server -D

创建build目录来放配置文件，在build目录下分别创建下面几个文件

    webpack.config.js //webpack基础配置
    webpack.dev.config.js //开发环境配置
    webpack.pro.config.js //生产环境配置
    webpack.base.config.js //开发环境和生成环境公共配置

先配置公共文件webpack.base.config.js
安装ts-loader和html-webpack-plugin：npm i ts-loader html-webpack-plugin -D

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        entry:'./src/index.js',
        output:{
            filename:'app.js'
        },
        resolve:{
            extensions:['.js','.ts','.tsx']
        },
        module:{
            rules:[
                {
                    test:/\.tsx?$/i,
                    use:[{
                        loader:'ts-loader'
                    }],
                    exclude:/node_modules/
                }
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({
                template:'./src/tpl/index.html'
            })
        ]
    }

在src下创建tpl/index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    </html>

配置开发环境webpack.dev.config.js

    module.exports = {
        devtool:'cheap-module-eval-source-map' //cheap：表示会忽略类信息，
        //module:调试的时候会自动定位到ts源码，而不是js源码
    }

配置生产环境webpack.pro.config.js
- 安装clean-webpack-plugin

    const { CleanWebpackPlugin} = require('clean-webpack-plugin')
    //clean-webpack-plugin：每次成功构建后清空构建目录
    module.exports = {
        plugins:[
            new CleanWebpackPlugin()
        ]
    }

配置入口文件webpack.config.js
- 安装webpack-merge typescript

    const merge = require('webpack-merge')
    const baseConfig = require('./webpack.base.config')
    const devConfig = require('./webpack.dev.config')
    const proConfig = require('./webpack.pro.config')
    
    let config = process.NODE_ENV === 'development' ? devConfig:proConfig;
    
    module.exports=merge(baseConfig,config)

在package.json中配置命令

    "start":"webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build":"webpack --mode=production --config ./build/webpack.config.js"

执行npm start就可以在http://localhost:8080/访问
执行npm run build就可以打包