集成 Webpack

要让 Webpack 支持 TypeScript，需要解决以下2个问题：

  1. 通过 Loader 把 TypeScript 转换成 JavaScript。
  2. Webpack 在寻找模块对应的文件时需要尝试 ts 后缀。

添加tsconfig.json

  1. {
  2.   "compilerOptions": {
  3.     "module": "commonjs", // 编译出的代码采用的模块规范
  4.     "target": "es5", // 编译出的代码采用 ES 的哪个版本
  5.     "sourceMap": true // 输出 Source Map 方便调试
  6.   },
  7.   "exclude": [ // 不编译这些目录里的文件
  8.     "node_modules"
  9.   ]
  10. }

配置

  1. module.exports = {
  2.   // 执行入口文件
  3.   entry: './main',
  4.   output: {
  5.     filename: 'bundle.js',
  6.     path: path.resolve(__dirname, './dist'),
  7.   },
  8.   resolve: {
  9.     // 先尝试 ts 后缀的 TypeScript 源码文件
  10.     extensions: ['.ts', '.js'] 
  11.   },
  12.   module: {
  13.     rules: [
  14.       {
  15.         test: /\.ts$/,
  16.         loader: 'awesome-typescript-loader'
  17.       }
  18.     ]
  19.   },
  20.   devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
  21. };