javascript - Webpack无法正确解析我的别名

我试图为我的应用程序提供一个命名空间，使其作为模块工作，并使用该命名空间导入我的组件并限制相对路径的使用。

虽然，即使我在这里遵循了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，但它也不起作用。

你有什么想法吗？

最佳答案

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

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

用一个简单的例子检查这个webpack resolve alias gist。

限制相对路径数的另一种解决方案是将./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中的每个文件夹都有一个别名。