使用webpackparsing需要的path
我仍然困惑如何解决与webpack模块path。 现在我写：
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')将不起作用。
我觉得很愚蠢，因为我已经多次阅读文档，我觉得我失去了一些东西。 什么是正确的方法，以避免写所有的相对需要../../等？
Webpack> 2.0
见wtk的答案 。
Webpack 1.0
更直接的方法是使用resolve.root。
http://webpack.github.io/docs/configuration.html#resolve-root
resolve.root
包含您的模块的目录（绝对path）。 也可能是一个目录数组。 应该使用此设置将单个目录添加到searchpath。
在你的情况下：
webpackconfiguration
var path = require('path'); // ... resolve: { root: path.resolve('./mydir'), extensions: ['', '.js'] }
消费模块
require('myfile')
要么
require('myfile.js')
另请参阅： http : //webpack.github.io/docs/configuration.html#resolve-modules目录
为了将来的参考，webpack 2删除了一切，但modules作为解决途径的方式。 这意味着root 无法工作。
https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options
示例configuration从以下开始：
{ modules: [path.resolve(__dirname, "app"), "node_modules"] // (was split into `root`, `modulesDirectories` and `fallback` in the old options)
resolve.alias应该按照您所描述的方式工作，所以我提供这个答案以帮助减轻原始问题中的build议可能导致的任何混淆。
一个像下面的parsingconfiguration会给你想要的结果：
// 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' )将按预期工作。 如果没有，那就一定还有其他的问题。
如果你有多个模块需要添加到searchpath中，那么resolve.root是有道理的，但是如果你只是希望能够在你的应用程序代码中引用组件而不需要相对path， alias似乎是最直接的，明确。
alias一个重要优点是它给了你命名空间的机会，它可以增加你的代码的清晰度; 就像很容易看到其他require引用哪个模块一样， alias允许你编写描述性的require ，使得你需要内部模块，例如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';
我最头疼的是没有命名空间的path。 像这样的东西：
./src/app.js ./src/ui/menu.js ./node_modules/lodash/
之前，我曾经设置我的环境做到这一点：
require('app.js') require('ui/menu') require('lodash')
我发现避免一个隐含的srcpath非常方便，它隐藏了重要的上下文信息。
我的目标是要求这样：
require('src/app.js') require('src/ui/menu') require('test/helpers/auth') require('lodash')
如您所见，我的所有应用程序代码都位于强制path名称空间内。 这很清楚，需要调用一个库，应用程序代码或testing文件。
为此，我确保我的parsingpath只是node_modules和当前的应用程序文件夹，除非您将您的应用程序命名空间在您的源文件夹，如src/my_app
这是我的默认webpack
resolve: { extensions: ['', '.jsx', '.js', '.json'], root: path.resolve(__dirname), modulesDirectories: ['node_modules'] }
如果将环境NODE_PATH设置为您当前的项目文件，则会更好。 这是一个更通用的解决scheme，它会帮助，如果你想使用其他工具没有webpack：testing，linting …
我已经用Webpack 2解决了这个问题：
module.exports = { resolve: { modules: ["mydir", "node_modules"] } }
你可以添加更多的目录数组…
使用Webpack 2解决了这个问题：
resolve: { extensions: ['', '.js'], modules: [__dirname , 'node_modules'] }
我没有得到为什么有人build议将myDir的父目录包含到webpack的modulesDirectories中，这应该很容易：
resolve: { modulesDirectories: [ 'parentDir', 'node_modules', ], extensions: ['', '.js', '.jsx'] },
如果您正在使用create-react-app ，则可以简单地添加一个.env文件
NODE_PATH=src/
来源： https ： //medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d
