为什么 VS Code 认为导入有效但 WebPack 不认为？

Question

我很确定这完全是关于我使用的 WebPack 版本 ("webpack-cli": "3.3.11")，但我想在继续调试升级 WebPack 的另一次旅程之前确定我是对的（我尝试升级它到 5，但如果没有配置文件它就不能工作，我只是在扩展阅读手册指令的限制。

在 tsconfig.base.js 我有这个：

"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
}

（使用单独 tsconfig.base.json 的原因在我链接到下面的问题中。）

然后就是这个：

import { RegistrationStepManager } from "@/helpers";

在文件 ./src/some/path/RegistrationStepper.tsx.

中

运行 npm start 与 CRA 和 react-scripts v4.0.3 显示错误但没有崩溃：

Failed to compile.

./src/some/path/RegistrationStepper.tsx
Module not found: Can't resolve '@/helpers' in '/my-path/my-project/src/some/other/path'.

VS Code 工具提示和自动完成显示一切都已正确导入，没有红色波浪线，只有一些可忽略的警告。

我认为 "@/*" 的别名不能很好地工作，但是因为 VS Code 与它配合得很好，我认为它可能是一个错误。

遇到这种故障，TS是如何配合WebPack的呢？我必须升级到 WebPack 5 吗？

我同一天提出的另一个关于同一代码的问题，也许它也与此相关：。

谢谢。

更新 1

我阅读了并且我打算在没有 CRA 的情况下从 CRA 迁移到 WebPack，因为我正在从事的项目不只是为了玩。如果可以的话，请给我一个从 CRA 迁移到 WebPack 的指南。我认为这个问题开头的问题是关于一些缺少的 WebPack 配置。我已经有一个旧的 WebPack 配置文件可能会导致部分问题。

Answer 1

我有一个没有实际使用的 WebPack 配置文件。我实际上是在使用 CRA。所以我开始使用 react-app-rewired 和 WebPack v4 作为中间解决方案，直到我开始使用“纯”WebPack。在 config-overrides.js 我输入：

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: function(config, env) {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        plugins: [
          ...config.resolve.plugins,
          new TsconfigPathsPlugin({
            extensions: [".js", ".jsx", ".ts", ".tsx"],
          }),
        ],
      },
    };
  },
};

迁移到 react-app-rewired 并进行此更改后，Failed to compile. 错误消失了。这也解决了 .

中的问题

为什么 VS Code 认为导入有效但 WebPack 不认为？

Why does VS Code consider an import valid but WebPack does not?

typescript

webpack

visual-studio-code

create-react-app

webpack-3

更新 1