Webpack无法正确解析我的别名

Question

我正在尝试为我的应用程序创建一个名称空间作为模块,并使用此命名空间导入我的组件并限制使用相对路径.

虽然,虽然我在这里遵循webpack文档的别名:http://webpack.github.io/docs/configuration.html#resolve-alias 我无法使它工作.

这是我的解析对象的样子:

resolve: {
  root: path.resolve(__dirname),
  alias: {
    myApp: './src',
  },
  extensions: ['', '.js', '.json', '.jsx']
}

path.resolve(__dirname) 做出决议 /Users/Alex/Workspace/MyAppName/ui/

我在文件中导入我的文件/Users/Alex/Workspace/MyAppName/ui/src/components/Header/index.jsx:

import { myMethod } from 'myApp/utils/myUtils';

我在构建期间收到以下错误:

ERROR in ./src/components/Header/index.jsx
Module not found: Error: Cannot resolve module 'myApp/utils/myUtils' in /Users/Alex/Workspace/MyAppName/ui/src/components/Header
 @ ./src/components/Header/index.jsx 33:19-56

我也尝试过modulesDirectories但它也不起作用.

你知道什么是错的吗？

Answer 1

大多数时候，这取决于您的项目文件夹结构。如果您的 webpack 文件位于文件夹内，请确保相应地处理它

\n\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 config/webpack.config.js\n

\n\n

modules.exports = {\n resolve: {\n    extensions: [\'.js\', \'.jsx\'],\n    alias: {\n      Components: path.resolve(__dirname, \'../src/components/\'),\n    }\n  },\n  ...\n  resolve: {\n    ...\n  }\n}\n

\n\n

此外，我们经常将文件夹命名为“source”，但在路径中使用“src”。

\n\n

\n

该死！复制粘贴占用了我大量的调试时间

\n

\n\n

希望这可以帮助由于上述原因而面临此类问题的人。

\n

Answer 2

这对许多人来说可能是显而易见的，但如果您像我一样，花了太多时间试图弄清楚为什么它在从 Windows 或 Mac 迁移到 Linux 时突然不起作用，那么请检查路径中的大小写...

我和项目中的其他人都使用 Windows 或 Mac，但在家里我喜欢使用双启动 ubuntu。在克隆我们的代码并运行 webpack 时，我遇到了很多Cannot resolve module...错误。我花了比我愿意承认的更多的时间来搜索 Node、npm、webpack 或其他任何东西中的一些模糊错误，直到我注意到失败模块的路径类似于@app/Shared/settings.js并且 require 是require('@app/shared/settings'). Windows 并不关心，所以一切都很好，直到我开始在 Linux 上工作。事实证明，问题不在于 webpack、node 或其他任何东西，所以这可能就是为什么我没有发现任何人暗示这可能是问题所在。

希望这可以为某人节省一些时间。或者也许我只是愚蠢，我不知道。

Answer 3

将别名解析为绝对路径应该可以解决问题：

resolve: {
  alias: {
    myApp: path.resolve(__dirname, 'src'),
  },
  extensions: ['', '.js', '.jsx']
}

通过一个简单的示例检查此Webpack解析别名要点。

限制相对路径数的另一种解决方案是将./src文件夹添加为root而不是对其进行别名：

resolve: {
  root: [path.resolve('./src')],
  extensions: ['', '.js', '.jsx']
}

然后，您将可以要求将所有文件夹都放在其中./src，就好像它们所在的模块一样。例如，假设您具有以下目录结构：

.
??? node_modules
??? src
?   ??? components
?   ??? utils

您将可以从中导入components并utils像这样：

import Header from 'components/Header';
import { myMethod } from 'utils/myUtils';

有点像为其中的每个文件夹都有一个别名./src。