小开

最佳答案

Webpack > 2.0

参见 WTK 的回答。

Webpack 1.0

实现这一点的一种更直接的方法是使用 Resolve.root。

Http://webpack.github.io/docs/configuration.html#resolve-root

分解，根

包含模块的目录(绝对路径)。也可以是目录的数组。此设置应用于将单个目录添加到搜索路径。

就你而言:

Webpack 配置

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

小开

如果其他人遇到这个问题，我可以让它像这样工作:

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')

如您所见，我的所有应用程序代码都存在于一个强制路径命名空间中。这非常清楚地表明哪个调用需要库、应用程序代码或测试文件。

为此，我确保我的解决路径只是 node_modules和当前的应用程序文件夹，除非你的名称空间你的应用程序在你的源文件夹，如 src/my_app

这是我对 webpack 的默认设置

resolve: {
extensions: ['', '.jsx', '.js', '.json'],
root: path.resolve(__dirname),
modulesDirectories: ['node_modules']
}

如果将环境变量 NODE_PATH设置为当前项目文件，效果会更好。这是一个更通用的解决方案，它将有助于如果你想使用没有 webpack 的其他工具: 测试，linting..。

小开

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命名空间，这可以增加代码的清晰度; 就像很容易从其他 require中看到引用了什么模块一样，alias允许你编写描述性的 require，使你明显需要内部模块，例如 require( 'my-project/component' )。resolve.root只是将您放置到所需的目录中，而不给您进一步命名该目录的机会。

小开

为了以后的参考，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)

小开

我不明白为什么有人建议把 myDir 的父目录包含到 webpack 的 module 目录中，这样应该很容易做到:

resolve: {
modulesDirectories: [
'parentDir',
'node_modules',
],
extensions: ['', '.js', '.jsx']
},

小开

我用 Webpack 2解决了这个问题:

module.exports = {
resolve: {
modules: ["mydir", "node_modules"]
}
}

您可以向 array 添加更多的目录..。

小开

如果您使用的是 创建-反应-应用程序，您可以简单地添加一个包含

NODE_PATH=src/

资料来源: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

小开

用 Webpack 2解决了这个问题:

   resolve: {
extensions: ['', '.js'],
modules: [__dirname , 'node_modules']
}

小开

这个帖子很老了，但是因为没有人发布关于 Reque.context 的帖子，所以我要提一下:

您可以使用 reque.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')

小开

简单地使用巴别尔插件模块解析器:

$ npm i babel-plugin-module-resolver --save-dev

如果你还没有一个 .babelrc文件，那么在 root 下面创建一个:

{
"plugins": [
[
"module-resolver",
{
"root": ["./"]
}
]
]
}

根目录下的一切都将被视为绝对重要:

import { Layout } from 'components'

有关对 VSCode/Eslint 的支持，请参见给你。

使用 webpack 解决需要的路径

Webpack > 2.0

Webpack 1.0

Webpack 配置

消耗模块