javascript - Webpack ขว้างข้อผิดพลาด "คุณอาจต้องการตัวโหลดที่เหมาะสม" ใน react กับ typescript

ฉันพยายามตั้งค่าโปรเจกต์ใหม่ด้วย webpack, react, typescript แต่ฉันไม่สามารถทำให้มันทำงานได้

ฉันได้พยายามใช้ html loader และลองทำตามบทเรียนต่างๆ เพื่อแก้ปัญหาแล้ว

การตั้งค่า Webpack:

const path = require("path");

module.exports = {
  entry: {
    app: ["./src/app"]
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
              compilerOptions: {
                module: "es2015",
                allowJs: true
              }
            }
          }
        ],
        include: [path.resolve(path.resolve(__dirname, "../"), "./src")]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"]
  }
};

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "jsx": "react",
        "allowJs": true,
        "noImplicitThis": true,
        "removeComments": false,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "lib": ["dom", "es5", "scripthost", "es2015", "es2017"],
        "downlevelIteration": true,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "outDir": "./dist/"
    }
}

แอป.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(<></>, document.getElementById("root"));

แต่ในขณะที่คอมไพล์ด้วย: webpack --mode production :- เกิดข้อผิดพลาด:

ข้อผิดพลาดใน ./src/app.tsx 4:16 การวิเคราะห์โมดูลล้มเหลว: มีโทเค็นไม่คาดคิด (4:16) คุณอาจต้องใช้โหลดเดอร์ที่เหมาะสมเพื่อจัดการกับประเภทไฟล์นี้ ขณะนี้ยังไม่มีการกำหนดค่าโหลดเดอร์ใด ๆ สำหรับประมวลผลไฟล์นี้ ดูเพิ่มเติมได้ที่ https://webpack.js.org/concepts#loaders | import * as ReactDOM จาก "react-dom"; | //import { Home } จาก "./pages/home";

ReactDOM.render(<>, document.getElementById("root")); | @ multi ./src/app app[0]

คำตอบ #1

ฉันลองมันแล้วและปัญหาคือ include นี้ include: [path.resolve(path.resolve(__dirname), "./src")]... ไม่จำเป็นต้องย้อนกลับจาก dirname และมันจะใช้งานได้

เครดิต: @JurajKocan