使用webpack解决需求路径

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') 将无法正常工作。我很笨，因为我已经阅读了很多文档，并且觉得自己缺少一些东西。避免用../../etc 写下所有相对要求的正确方法是什么？

Answer 1

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只是使您进入所需的目录，而没有机会给它进一步命名空间。