我仍然对如何使用 webpack 解析模块路径感到困惑。现在我写：
myfile = require('../../mydir/myfile.js')
但我想写
myfile = require('mydir/myfile.js')
我在想resolve.alias可能会有所帮助，因为我看到了一个类似的例子 using { xyz: "/some/dir" }as alias then I can require("xyz/file.js")。
但是，如果我将别名设置为{ mydir: '/absolute/path/mydir' }，require('mydir/myfile.js') 将不起作用。
我感到很愚蠢，因为我已经多次阅读文档并且我觉得我错过了一些东西。避免使用../../etc 编写所有相关要求的正确方法是什么？
请参阅wtk 的答案。
更直接的方法是使用 resolve.root。
http://webpack.github.io/docs/configuration.html#resolve-root
解决.root
包含您的模块的目录（绝对路径）。也可能是一个目录数组。此设置应用于将单个目录添加到搜索路径。
在你的情况下：
var path = require('path');
// ...
resolve: {
root: path.resolve('./mydir'),
extensions: ['', '.js']
}
require('myfile')
或者
require('myfile.js')
另见：http ://webpack.github.io/docs/configuration.html#resolve-modulesdirectories
为了将来参考，webpack 2 删除了所有内容，但modules作为解析路径的一种方式。这种手段是行不通root的。
https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options
示例配置开始于：
{
modules: [path.resolve(__dirname, "app"), "node_modules"]
// (was split into `root`, `modulesDirectories` and `fallback` in the old options)
resolve.alias应该完全按照您描述的方式工作，因此我将其作为答案提供，以帮助减轻可能因原始问题中的建议不起作用而导致的任何混淆。
像下面这样的解析配置将为您提供所需的结果：
// used to resolve absolute path to project's root directory (where web pack.config.js should be located)
var path = require( 'path' );
...
{
...
resolve: {
// add alias for application code directory
alias:{
mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )
},
extensions: [ '', '.js' ]
}
}
require( 'mydir/myfile.js' )将按预期工作。如果没有，那肯定有其他问题。
如果您有多个要添加到搜索路径的模块，这resolve.root是有道理的，但如果您只想能够在没有相对路径的情况下引用应用程序代码中的组件，这alias似乎是最直接和明确的。
的一个重要优点alias是它使您有机会为您require的 s 命名，这可以使您的代码更加清晰；就像从其他requires 中很容易看到正在引用的模块一样，它alias允许您编写描述性require的 s，从而清楚地表明您需要内部模块，例如require( 'my-project/component' ). resolve.root只是将您放入所需的目录，而不给您进一步命名它的机会。
万一其他人遇到这个问题，我可以让它像这样工作：
var path = require('path');
// ...
resolve: {
root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
extensions: ['', '.js']
};
我的目录结构在哪里：
.
├── dist
├── node_modules
├── package.json
├── README.md
├── src
│ ├── components
│ ├── index.html
│ ├── main.js
│ └── styles
├── webpack.config.js
然后从src目录中的任何地方我可以调用：
import MyComponent from 'components/MyComponent';
我最头疼的是在没有命名空间路径的情况下工作。像这样的东西：
./src/app.js
./src/ui/menu.js
./node_modules/lodash/
在我用来设置我的环境来执行此操作之前：
require('app.js')
require('ui/menu')
require('lodash')
我发现避免隐式路径更方便src，因为隐式路径隐藏了重要的上下文信息。
我的目标是要求这样：
require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')
如您所见，我所有的应用程序代码都位于强制路径命名空间中。这很清楚哪个 require 调用需要一个库、应用程序代码或测试文件。
为此，我确保我的解析路径只是node_modules当前的应用程序文件夹，除非您在源文件夹中命名您的应用程序，例如src/my_app
这是我使用 webpack 的默认设置
resolve: {
extensions: ['', '.jsx', '.js', '.json'],
root: path.resolve(__dirname),
modulesDirectories: ['node_modules']
}
如果将环境变量设置NODE_PATH为当前项目文件会更好。这是一个更通用的解决方案，如果您想在没有 webpack 的情况下使用其他工具，它将有所帮助：测试、linting...
我已经用 Webpack 2 解决了这个问题：
module.exports = {
resolve: {
modules: ["mydir", "node_modules"]
}
}
您可以将更多目录添加到数组...
如果您使用的是create-react-app，您可以简单地添加一个.env包含
NODE_PATH=src/
来源：https ://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d
使用 Webpack 2 解决了这个问题：
resolve: {
extensions: ['', '.js'],
modules: [__dirname , 'node_modules']
}
该线程很旧，但由于没有人发布有关 require.context 我将提及它：
您可以使用 require.context 来设置要浏览的文件夹，如下所示：
var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param
return req('./myfile.js')
只需使用babel-plugin-module-resolver：
$ npm i babel-plugin-module-resolver --save-dev
.babelrc如果您还没有文件，则在根目录下创建一个文件：
{
"plugins": [
[
"module-resolver",
{
"root": ["./"]
}
]
]
}
并且根目录下的所有内容都将被视为绝对导入：
import { Layout } from 'components'
有关 VSCode/Eslint 支持，请参见此处。
我不明白为什么有人建议将 myDir 的父目录包含到 webpack 的 modulesDirectories 中，这应该很容易做到：
resolve: {
modulesDirectories: [
'parentDir',
'node_modules',
],
extensions: ['', '.js', '.jsx']
},