自己动手搭建 Webpack + Typescript 的项目工程最后运行 npm run build 执行编译命令，应

安装 NodeJS 环境
安装 NPM 或 Yarn 包管理工具
用 mkdir ~/demo 命令创建一个文件夹
用 cd ~/demo 进入到这个文件夹
使用 npm install ts-loader typescript webpack webpack-cli --save 或者 yarn add ts-loader typescript webpack webpack-cli 命令安装相关依赖

用 vi ./package.json 编辑项目配置，增加一项启动命令 build，如以下内容：

{
  "scripts": {
    "build": "webpack"  # 新增的 build 命令
  },
  "dependencies": {
    "ts-loader": "^7.0.1",
    "typescript": "^3.8.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }
}

用 vi ./tsconfig.json 创建一个 Typescript 的配置文件，并填写以下内容：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

用 vi ./webpack.config.js 创建一个 Webpack 的配置文件，并填写以下内容：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader'
    }]
  }
};

用 vi ./index.html 创建一个 HTML 文件，并编写以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack + TypeScript</title>
</head>
<body>

<script src="dist/main.js"></script>
</body>
</html>

用 mkdir ./src 命令创建一个文件夹
用 vi ./src/index.ts 创建一个 Typescript 脚本文件，并编写以下内容：
```
console.log("Hello TypeScript!");
```
最后运行 npm run build 执行编译命令，应该会生成 ./dist/main.js 文件，此时访问 index.html 即可执行。