NPM – Webpack – 使用 import 的絕對路徑方法

2019-03-25 / JSN / 0 Comments / 781 次瀏覽

預設的時候通常使用相對路徑，可是會很不容易管理，例如

import '../compoments/tabs'
import '../../template/helloWorld'

這時我們只要在 webpack.config.js 使用模塊的解析方式 “resolve” 來設定別名，就能在 import 的時候簡寫來能省去計算相對位置的麻煩，例如

module.exports = {
    //...
    resolve: {
        alias: {
            '@compoments': path.resolve(__dirname, 'assets/src/javascript/compoments'),
            '@template': path.resolve(__dirname, 'assets/src/javascript/template'),
            '@scss': path.resolve(__dirname, 'assets/src/scss'),
        }
    }
    
}

修改成

import '@compoments/tabs'
import '@template/helloWorld'
import '@scss/app.scss'

當然開頭的 @ 是我習慣自訂用來區別純單字的符號，你也可以不要使用，更多方法可以參考官網說明。

參考官方網站