使用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'

我會選擇別名，因為它看起來更清潔，但沒有真正的優勢。 只是外觀和感覺