node.js - Webpack Typescript错误意外的令牌

Question

我正在尝试使用 Webpack 运行 Typescript，但我似乎遇到了问题。一切正常，直到我引入变量的类型（例如color:string;）。谁能帮我？

包.json：

{
  ...
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^5.3.0",
    "typescript": "^3.1.4",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2"
  },
  ...
}

webpack.config.js

module.exports = {
    ...
    module: {
        rules: [{
            exclude: NODE_DIR, /** path to node_modules folder */
            test: /\.tsx?$/,
            use: {
                loader: 'ts-loader'
            }
        }]
    },
    output: output = {
        filename: 'bundle.js',
        path: DIST_DIR /** path to dist folder */
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
}

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "declaration": true,
        "module": "es6",
        "moduleResolution": "node",
        "target": "es5",
    }
}

当我尝试运行我的脚本时，我不断收到此错误：

./src/typescript/class/Car.ts 中的错误 4:8 模块解析失败：意外令牌 (4:8) 您可能需要适当的加载程序来处理此文件类型。

索引.ts

import { Car } from './class/Car ';
let car= new Car ({
    color : 'blue'
});

Car.ts

export class Car {
    public color:string; /** here is where the error originates */

    constructor(config) { }
}

标签： node.jstypescriptwebpackts-loader