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

Question

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

import ComponentName from "components/ComponentName"

而不是像这样：

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

（这一切都假设我的components目录位于src目录中）

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

1. 使我里面的WebPack决心模块src使用目录resolve.modules这样的选项：

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

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

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

所以，我的问题是，使用一种特定方法优于另一种方法是否有任何优势？

提前致谢

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'

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