Webpack＆gt; 2.0

Question

我仍然对如何使用webpack解析模块路径感到困惑。现在我写道：

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')将无效。

我感到愚蠢，因为我多次阅读该文档，我觉得我错过了一些东西。什么是避免用../../等编写所有相对要求的正确方法？

Answer 1

Webpack＆gt; 2.0

请参阅wtk's answer。

Webpack 1.0

更直接的方法是使用resolve.root。

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

<强> resolve.root

包含模块的目录（绝对路径）。也可以是一系列目录。此设置应用于将单个目录添加到搜索路径。

在你的情况下：

webpack config

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

Answer 2

为了将来参考，webpack 2删除了除RewriteCond %{SERVER_PORT} 80 RewriteRule ^(.*)$ https://www.domain.com/$1 [R,L]之外的所有内容作为解析路径的方法。这意味着modules将不工作。

https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

示例配置以：

开头

root

Answer 3

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只会让你进入所需的目录，而不会让你有机会进一步命名它。

Answer 4

如果有其他人遇到这个问题，我能够让它像这样工作：

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

Answer 5

我最头疼的是没有命名空间路径。像这样：

./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']
}

如果将环境var NODE_PATH设置为当前项目文件，那会更好。这是一个更通用的解决方案，如果您想在没有webpack的情况下使用其他工具，它将会有所帮助：测试，linting ......

Answer 6

我已经使用Webpack 2解决了这个问题：

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

您可以向阵列添加更多目录......

Answer 7

使用Webpack 2解决了这个问题：

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

Answer 8

如果您正在使用 create-react-app ，则只需添加包含

的.env文件即可

NODE_PATH=src/

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

Answer 9

这个帖子已经过时了，但由于没有人发布有关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')

Answer 10

我不明白为什么有人建议将myDir的父目录包含在webpack中的modulesDirectories中，这应该很容易实现：

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

Answer 11

只需使用babel-plugin-module-resolver：

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

如果还没有，请在根目录下创建一个.babelrc文件：

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

根目录下的所有内容都将被视为绝对导入：

import { Layout } from 'components'

有关VSCode / Eslint支持，请参见here。

使用webpack解析需求路径

11 个答案:

Webpack＆gt; 2.0

Webpack 1.0

webpack config

消费模块