【问题标题】：Why does VS Code consider an import valid but WebPack does not?为什么 VS Code 认为导入有效但 WebPack 不认为有效？
【发布时间】：2021-08-29 03:46:00
【问题描述】：

我很确定这完全与我使用的 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 和 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 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 配置文件。

【问题讨论】：

你在正确的轨道上。目前 CRA 不支持 typescript 别名，因此您必须使用 react-app-rewired 或 craco 之类的东西来增强它。如果可以的话，我会建议从 CRA 迁移出去。有大量教程介绍如何在没有 CRA 的情况下使用 typescript 和 webpack 构建 react 项目
@SethLutske 感谢您的确认和让我放心。

标签： typescript webpack visual-studio-code create-react-app webpack-3

【解决方案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. 错误消失了。这也解决了How can I import an enum through an intermediate TS file? 中的问题。

【讨论】：