📦 TypeScript Webpack

Install Typescript

npm i typescript -S

Install Webpack

安装下本地开发三件套

npm i webpack webpack-cli webpack-dev-server -D

Install Plugins

npm i ts-loader clean-webpack-plugin html-webpack-plugin -D

Add config file

新建 build 文件夹，在文件夹里新建 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  entry: "./src/index.ts", // 指定入口文件
  output: {
    filename: "main.js" // 指定输出文件
  },
  resolve: {
    extensions: [
      ".ts",
      ".tsx",
      ".js"
    ]
  },
  module: {
    rules: [{
      test: /\.tsx?$/, // 匹配ts文件
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
  devServer: {
    contentBase: './dist',
    stats: 'errors-only',
    compress: false,
    host: 'localhost',
    port: '8086'
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['./dist']
    }),
    new HtmlWebpackPlugin({
      template: './src/template/index.html'
    })
  ]
};