我仍然对如何使用 webpack 解析module路径感到困惑。现在我写：
myfile = require('../../mydir/myfile.js')
但我想写
myfile = require('mydir/myfile.js')
我在想resolve.alias可能会有所帮助，因为我看到了一个类似的例子，使用{ xyz: "/some/dir" }别名然后我可以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
包含您的module的目录（绝对路径）。也可能是一个目录数组。此设置应用于将单个目录添加到搜索路径。
在你的情况下：
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' )将按预期工作。如果没有，那么肯定有其他问题。
如果您有多个module要添加到搜索路径中，这resolve.root是有道理的，但如果您只想能够在没有相对路径的情况下引用应用程序代码中的组件，这alias似乎是最直接和明确的。
的一个重要优点alias是它使您有机会为您的requires命名空间，这可以增加您的代码的清晰度；就像很容易从其他requires 中看到正在引用的module一样，alias允许您编写描述性requires 以明确您需要内部module，例如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 ......