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

Question

我有一个简单的功能，./src/ts/bundle.ts但它会产生错误，我不知道为什么？ERROR in ./src/ts/bundle.ts 6:22Module 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 );}包.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/')            ]        }]    }}

Answer 1

你的 中有一个 typeo webpack.config.js，要么删除它，要么修复它。/src/ts/您已告诉它仅在某些文件夹上运行，因此您指定的文件位于ts-loader.

// ...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