TypeScript  | 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

传统调试TypeScript

Typescript 代码需要通过构建将它转换成 JavaScript 代码后才能运行。

// show .ts 为 show 函数增加类型检查
export function show (content : string) {
  console.log('Hello ,' + content)
}
// main.ts 通过 ES6 模块规范导如 show 函数
import {show) from './show '; 
// 执行 show 函数
show ('Webpack '); 

我们需要在当前项目的根目录下新建一个用于配置编译选项的 tsconfig.json 文件，编译器默认会读取和使用这个文件，配置文件的内容大致如下： 

通过 npm install -g typescript 安装编译器到全局后，可以通过 tsc main. ts 命令编译 器到全局后，可以通过 tsc main. ts 命令编译

集成 Webpack 

1. 通过 Loader TypeScript 转换成 JavaScript
2. Webpack 在寻找模块对应的文件时需要尝试 ts 后缀。
3. 在运行构建前 npm i -D typescript awesome-typescript-loader 

配置如下:

const path = require('path')
module.exports = {
  entry: './main',
  output: {
    filename: 'bundle.js',
    path: path.resolve(＿dirname,'./dist')
  },
  resolve: {
    // 先尝试以 ts 为后缀的 Typescript 源码文件
    extensions : [ '.ts', '.js']
  },
  module: {
    rules: [
      {
        test : /\.ts$/, loader: 'awesome-typescript-loader' 
      }
    ]
  },
  devtool：'so urce-map'， //  输出 ur ce Map 以方便在浏览器里调试 Types cript 代码
}

总结

由于对webpack比较感兴趣， 所以看了一些资料 《深入浅出Webpack.pdf--吴浩麟》后，决定打包配置引入TypeScript，小试一把。