Webpack Alias 讓開發更方便

使用方法

專案結構：

.
|____.babelrc
|____.gitignore
|____devServer.js
|____dist
| |____assets
| | |____app.js
| |____index.html
|____package.json
|____src
| |____component
| | |____App.js
| |____config
| | |____config.js
| |____index.js
|____webpack.config.babel.js

webpack.config.js 中

...
resolve: {
  alias: {
    App: path.resolve(__dirname, 'src/component/'),
    Config: path.resolve(__dirname, 'src/config/'),
  }
},
...

那麼我們要在 component/App.js 中引用 config/config.js 該怎麼做呢？

// relative path
import config from '../config/config.js'
// 使用 Alias
import config from 'Config/config.js'

也就是說，Webpack 幫我們用我們設定好的 Alias，尋找路徑，找不到才會噴 Error。

這樣有什麼優點：

1. 封裝改變，當你要「更改檔案結構」的時候，除了「移動檔案與修改 Alias 以外，不用改相對路徑了」！
2. 大型架構中更容易追 code

缺點：

1. 沒辦法使用 IDE 相對路徑提示

… 沒了，你沒看錯，就是沒了。

真實世界的 project

• 我的 GitHub Repository：new-tab-web-extension

以上

記錄一下，也希望能幫助到有問題的人！