Webpack 抛出错误“您可能需要适当的加载器”以与打字稿作出反应答案

【问题标题】：Webpack throwing error "You may need an appropriate loader" in react with typescriptWebpack 抛出错误“您可能需要适当的加载器”以与打字稿作出反应
【发布时间】：2020-01-25 14:25:36
【问题描述】：

我尝试使用 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/"
    }
}

app.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 |从“react-dom”导入 * 作为 ReactDOM； | //从“./pages/home”导入{ Home}；

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

【问题讨论】：

完整项目链接：dropbox.com/s/hhzjq32jgehxx90/Monthly.zip?dl=0
app: ["./src/app.tsx"] 带有扩展名的名称，并且这个包含路径很奇怪...从目录名返回？
我试过了，这个包含是问题所在。包括： [path.resolve(path.resolve(__dirname), "./src")]... 无需从 dirname 返回，它会工作
@JurajKocan 是的，这就是问题

标签： javascript reactjs typescript webpack

【解决方案1】：

我试过了，这个包含是问题所在。包括： [path.resolve(path.resolve(__dirname), "./src")]... 无需从 dirname 返回，它会工作。

致谢：@JurajKocan

【讨论】：