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

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

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

用一个简单的例子检查这个webpack 解析别名要点。

限制相对路径数量的另一种解决方案是将您的./src文件夹添加为 根目录而不是别名：

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

Answer 2

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

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

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

Answer 3

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

.
├── node_modules
├── src
│   ├── components
│   └── config/webpack.config.js

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

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

该死！ 复制粘贴占用了我很多调试时间

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

Answer 4

我得到了同样的错误。 最后我发现问题是我写了两次resolve 。 第二个resolve覆盖了前一个resolve 。 我的代码是这样的：

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

更多帮助可以在Webpack Doc 中找到

Answer 5

我使用没有下一个语法：

resolve: {
        alias: {
            Data:  __dirname + '/src/data'
        },
        extensions: ['.js', '.jsx', '.json']

    }

import points from 'Data/points.json';

Answer 6

就我而言，我想给mobx别名，这样任何mobx导入mobx将始终返回相同的实例，无论导入调用是来自我的主应用程序，还是来自它使用的库之一。

起初我有这个：

webpackConfig.resolve.alias = {
    mobx: path.resolve(root, "node_modules", "mobx"),
};

但是，这只会强制从我的应用程序自己的代码中导入mobx以使用别名。

为了让它也适用于库的导入调用，我必须这样做：

webpackConfig.resolve.alias = {
    mobx: path.resolve(root, "node_modules", "mobx"),
    "LIBRARY_X/node_modules/mobx": path.resolve(root, "node_modules", "mobx"),
};

这很奇怪，因为我很确定之前只有mobx别名用于两种上下文，但现在显然不行（Webpack v4.41.2）。

无论如何，以上是我解决的方法。 （在我的情况下，我需要它来防止使用两个 mobx 实例，因为这会破坏事物，并且LIBRARY_X是使用 npm-link LIBRARY_X链接的，因此我无法删除/统一辅助mobx文件夹本身）