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

Question

我有一个简单的功能，./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 );

| }

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