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

Question

我正在尝试为我的应用创建一个命名空间以作为模块工作，并使用此命名空间导入我的组件并限制相对路径的使用。

尽管如此，尽管我在这里遵循了 alias 的 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

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

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 中的每个文件夹设置一个别名。