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

问题描述

我很确定这完全与我使用的 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 中。

使用 CRA 和 npm start 运行 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？

同一天的另一个问题，来自我，在同一个代码上，也许它在这里也很相关：How can I import an enum through an intermediate TS file?。

谢谢。

更新 1

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

解决方法

我有一个未实际使用的 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. 错误消失了。这也解决了 How can I import an enum through an intermediate TS file? 中的问题。