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

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

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

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

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

然后你将能够要求里面的所有文件夹，./src就好像它们在module中一样。例如，假设您有以下目录结构：

.
├── node_modules
├── src
│   ├── components
│   └── utils

你将能够从导入components和utils这样的：

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

就像为里面的每个文件夹都有一个别名./src。

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

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

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

大多数情况下，这取决于您的项目文件夹结构。如果您的 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”。

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

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

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

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

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