TypeScript 学习总结 —— Webpack 中配置使用 TS

• 初始化 node 项目

npm init -y

• 安装依赖

npm i -D webpack webpack-cli typescript ts-loader

• 编写 webpack 配置文件：webpack.config.js

const path = require('path')

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

• 编写 typescript 配置文件：tsconfig.json

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES2015",
        "strict": true
    }
}

• 在 package.json 中 增加命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }

• 当 使用 npm run build 后，npm 就会运行 webpack 进行打包流程，借助 ts-loader，加载 ts文件，并在 typescript的帮助下编译成 js