Webpack 2中实现绝对导入的最佳方法是什么？

Question

我正在为一个React项目设置Webpack配置，我希望能像这样导入我的组件：

import ComponentName from "components/ComponentName"

不要像这样：

import ComponentName from "../../components/ComponentName"

（假设我的 components 目录位于 src 目录中）进行一些研究后，我发现使用 Webpack 可以有两种不同的方法实现这一点：

1. 使用 resolve.modules 选项使 Webpack 解析在我的 src 目录中的模块，例如：

   
       resolve: {
         modules: [ path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules")]
       }
   
   

2. 使用别名选项将我的组件目录命名为别名：

   
       resolve: {
         alias: {
           components: path.resolve(__dirname, 'src/components/'),
          }
       }
   
   

那么，我的问题是，使用其中一种方法是否比另一种方法更有优势？

谢谢您提前的帮助。

- Fernando Poumián

Answer 1

当你使用别名时，可以像这样导入你的代码：

resolve: {
  alias: {
    AliasName: path.resolve(__dirname, 'src/components/'),
   }
}

import Comp from 'AliasName/Comp'

当您不使用别名时，您的代码将如下所示：

resolve: {
  modules: [ path.resolve(__dirname, "src"), path.resolve(__dirname, 
  "node_modules")]
}

import Comp from 'components/Comp'

我会选择使用别名，因为它看起来更加清晰，但实际上并没有任何真正的优势。只是外观和感觉不同而已。

- David Villarreal