我仍然对如何使用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') 将无法正常工作。

我觉得很笨，因为我已经阅读了很多文档，并且觉得自己缺少一些东西。避免用../../etc写下所有相对要求的正确方法是什么？

Webpack> 2.0

请参阅wtk的答案。

Webpack 1.0

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

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

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

为了将来参考，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，这可以增加代码的清晰度。就像从其他对象很容易看到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';

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

./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的情况下使用其他工具，则将有所帮助：测试，整理...

我已经用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')

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

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

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

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

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

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

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

import { Layout } from 'components'

有关VSCode / Eslint的支持，请参见此处。

本文地址：http://javascript.askforanswer.com/shiyongwebpackjiejuexuqiulujing.html
文章标签：javascript , webpack
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

使用webpack解决需求路径

Webpack> 2.0

Webpack 1.0

webpack配置

消费模块

文件下载