Javascript 使用Webpack 2进行绝对导入的最佳方法？

我正在为React项目设置网页包配置，我希望能够像这样导入我的组件：

import ComponentName from "components/ComponentName"

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

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

而不是像这样：

import ComponentName from "components/ComponentName"

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

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

（这一切都假设我的

组件

目录位于

src

目录中）

做了一点研究，到目前为止，我发现了两种不同的方法来使用Webpack实现这一点：

使用如下

resolve.modules

选项在my

src

目录中制作网页解析模块：

import ComponentName from "components/ComponentName"

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

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

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

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

所以，我的问题是，使用一种方法比另一种方法有什么优势吗

---

提前感谢

当您使用alias时，您可以这样导入代码

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'

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

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'

我会选择别名，因为它看起来干净多了，但没有真正的优势。只是外观和感觉