为什么 webpack 无法正确编译 ts 文件？

Question

I have a simple function on ./src/ts/bundle.ts But it generates an error, I don't why?

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 );
| }

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"
  }
}

This is the 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/')
            ]
        }]
    }
}

Answer 1

You have a typeo in your webpack.config.js , either remove it or fix it. You've told it to only run on certain folders, so the file that you have specified which is located in /src/ts/ is ignored by ts-loader .

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

to

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