webpack 配置 typescript

1、安装相应的依赖 ts-loader、typescript、html-webpack-loader

cnpm i ts-loader typescript html-webpack-loader -D

2、配置 webpack.config.ts 配置(注意，该文件必须为 .ts 结尾，不能 .js 结尾，因为打包时可能报错)

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: "production",
  entry: path.resolve(__dirname, '../src/main.ts'),
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    /**
     * html-webpack-plugin
     * 打包时，没有配置模版时会自动生成一个 index.html 输出
     * 并自动绑定打包生成的其他静态文件
     */
    new HtmlWebpackPlugin({
      // 配置模版路径
      template: path.resolve(__dirname, '../public/index.html')
    })
  ]
}

3、根目录下新建 tsconfig.json 文件

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "es6",
    "target": "es5",
    "allowJs": true
  }
}

4、配置 package.json 文件，启动命令

{
  "scripts": {
    "build": "webpack --config ./build/webpack.config.ts"
  }
}

5、编写业务代码 /src/main.ts

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

let greeter = new Greeter("world");

let button = document.createElement("button");
button.textContent = "Say Hello";
button.onclick = function () {
  alert(greeter.greet());
};

document.body.appendChild(button);