使用描述性文件名的 Webpack 别名在 React-app-rewired 中不起作用

Question

我已经使用 react-app-rewired 设置了 webpack 别名（使用 custom customize-cra中的addWebpackAlias ），但它仅在文件名的格式为filename.tsx或filename.ts时才有效。

我们使用典型的命名约定：

• 组件 例如： mycomponent.component.tsx
• redux 切片，如 redux 文档，例如： configuration.slice.ts

ETC...

在不使用 webpack 别名的情况下，引用文件可以正常工作，但是在添加别名时，只有没有.description.ts的文件才能正确解析。 VS Code 正确解析文件，只有 webpack 不起作用。

举个例子：

import { Home } from '@pages'工作正常。

import { Home } from '@pages/home/home.component'我收到解决错误。

Answer 1

我最终将 webpack 配置添加到 moduleFileExtensions 配置中

paths.moduleFileExtensions = [...paths.moduleFileExtensions, 'component.tsx', 'slice.ts', 'api.ts'];