为什么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";

在文件CCD_ 4中。

使用CRA和react-scripts v4.0.3运行npm start显示错误而未崩溃：

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代码工具提示和自动完成显示一切都导入得很好，没有红色的歪歪扭扭，只有一些不可忽略的警告。

我认为"@/*"的别名工作不太好，但是，因为VS Code可以很好地使用它，我认为这可能是一个错误。

遇到此故障时，TS如何使用WebPack？我必须升级到WebPack 5吗？

同一天，我在同一代码上提出的另一个问题，也许在这里也很相关：我如何通过中间TS文件导入枚举？。

谢谢。

更新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应用程序并重新布线并进行此更改后，Failed to compile.错误消失。这也解决了"如何通过中间TS文件导入枚举？"中的问题？。