webpack中怎么引用公共組件，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)成立于2013年，我們提供高端重慶網(wǎng)站建設(shè)公司、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、網(wǎng)絡(luò)營(yíng)銷推廣、小程序開(kāi)發(fā)、微信公眾號(hào)開(kāi)發(fā)、成都網(wǎng)站營(yíng)銷服務(wù)，提供專業(yè)營(yíng)銷思路、內(nèi)容策劃、視覺(jué)設(shè)計(jì)、程序開(kāi)發(fā)來(lái)完成項(xiàng)目落地，為成都混凝土攪拌站企業(yè)提供源源不斷的流量和訂單咨詢。

例如：引用一個(gè)公共模塊

import Menu from '../../../../../components/Menu'; // 這里路徑太深，很容易寫錯(cuò)

我們?cè)撛趺磧?yōu)化尼？

解決方案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';

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。