webpack配置typescript时候报错

Question

一、我的项目基本配置

• 1、package.json的文件

  {
    "name": "es6-webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "html-webpack-plugin": "^3.2.0",
      "ts-loader": "^5.3.2",
      "typescript": "^3.2.2",
      "webpack": "^4.28.2",
      "webpack-cli": "^3.1.2",
      "webpack-dev-server": "^3.1.13"
    }
  }

  • 2、webpack.dev.config.js文件配置

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/index.ts',
      output: {
        path: __dirname,
        filename: './dist/bundle.js',
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './index.html',
        })
      ],
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            // exclude: /(node_modules)/,
            use: [
              {
                loader: 'ts-loader',
              }
            ]
          }
        ]
      },
      resolve: {
        extensions: ['.tsx', '.ts', '.js']
      },
      devServer: {
        contentBase: path.join(__dirname, './dist'),
        open: true,
        port: 9000,
        disableHostCheck: true,
      }
    }

• 3、tsconfig.json文件

  {
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es5",
      "jsx": "react",
      "allowJs": true,
      "lib": ["es6"],
      "strict": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true
    },
    "include": [
      "./src/*"
    ],
    "exclude": [
      "./node_modules"
    ]
  }

• 4、index.ts文件

  class Demo {
    public name: string;
    constructor(name: string) {
      this.name = name;
    }
  }

运行后直接报错

ERROR in ./src/index.ts 6:9
Module parse failed: Unexpected token (6:9)
You may need an appropriate loader to handle this file type.
|
| class Demo {
>   public name: string;
|   constructor(name: string) {
|     this.name = name;
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.ts main[1]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 409 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 506 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 669 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

Answer 1

ts文件需要指定loader来解析

{
    test: /\.ts?$/,
    loader: 'ts-loader'
}