Webpack小技巧-公共組件引用路徑簡化

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

例如：引用一個公共模塊

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';

總結

或許這只是一個小優化，可是在實際場景中，可以大大的下降咱們的維護成本，提升咱們的生產效率！