Javascript 为什么webpack不能正确编译ts文件？

我在

/src/ts/bundle.ts上有一个简单的函数，但它会生成一个错误，我不知道为什么

ERROR in ./src/ts/bundle.ts 6:22
Module parse failed: Unexpected token (6:22)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> function sayHI ( text : string ){
|     console.log ( text );
| }


package.json

{
  "name": "document",
  "version": "1.0.0",
  "description": "",
  "main": "sample.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

这是webpack.config.js

/**
 * 
 * @package Webpack
 * main configuration file for the webpack bundler
 */

const path = require("path");

module.exports = {

    watch: true,
    devtool: 'source-map',
    mode: 'development',

    entry: {
        bundle: path.resolve(__dirname, 'src/ts/bundle.ts'),
    },


    output: {
        path: path.resolve(__dirname, 'dist/js/'),
        filename: '[name].js'
    },

    module: {
        rules: [{
            test: /\.ts$|js/,
            use: 'ts-loader',
            include: [
                path.resolve(__dirname, 'src/js/')
            ]
        }]
    }
}

您的
webpack.config.js
中有一个typeo，请将其删除或修复。您已告诉它仅在某些文件夹上运行，因此
ts loader
会忽略您指定的位于
/src/ts/
中的文件

// ...rest of webpack.config.js
    include: [
        path.resolve(__dirname, 'src/js/')
    ]
// ...rest of webpack.config.js

到

// ...rest of webpack.config.js
    include: [
        path.resolve(__dirname, 'src/js/')
    ]
// ...rest of webpack.config.js

// ...rest of webpack.config.js
    include: [
        path.resolve(__dirname, 'src/ts/')
    ]
// ...rest of webpack.config.js