日常開發中，我們會常常把一些功能提取出來，包裝成一個公共模塊或者組件，供不同地方使用，但是隨着項目不斷變大，項目目錄不斷變深，我們引用公共組件的路徑越來越長！

例如：引用一個公共模塊

import Menu from '../../../../../components/Menu'; // 這裏路徑太深，很容易寫錯

我們該怎麼優化尼？

解決方案1：使用webpack的resolve.alias屬性

先配置webpack

module.exports = {
    ...
    resolve: {
        alias: {
            "@commModule": path.resolve(__dirname, "src/components/")
        }
    }
    ...
};

引用Menu模塊

import Menu from '@commModule/Menu';

解決方案2：babel-plugin-module-resolver

配置.babelrc

{
    "plugins": [
        ["module-resolver", {
            "alias": {
                "@commMdule": "./src/components"
            }
        }]
    ]
}

引用Menu模塊

import Menu from '@commModule/Menu';

總結

或許這只是一個小優化，但是在實際場景中，能夠大大的降低我們的維護成本，提高我們的生產效率！