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

2021-09-13 17:11:30 字數 660 閱讀 3886

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

例如:引用乙個公共模組

import menu from '../../../../../components/menu'; // 這裡路徑太深,很容易寫錯
我們該怎麼優化尼?

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

先配置webpack

module.exports = 

}...

};

引用menu模組

import menu from '@commmodule/menu';
解決方案2:babel-plugin-module-resolver

配置.babelrc

}]]

}

引用menu模組

import menu from '@commmodule/menu';
總結

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

webpack的小外掛程式

1.clean webpack plugin 由於每次打包的時候有可能檔名稱不一樣,打包後的檔案就疊加到dist目錄下了,clean webpack plugin作用就是在每次打包之前,先把dist目錄刪掉,建立最新的目錄,避免不需要的檔案還留在dist目錄下。安裝 npm install clea...

matlab小技巧與verilog小技巧

注釋 選中 ctrl r 取消注釋 選中 ctrl t 採用中括號,可以將兩組資料進行拼接,由於採用dec2bin是不能轉換負數的,這一點要注意了,那麼就需要表示負數的補碼形式,補碼形式很簡單,就是判斷某個數是否小於0,小於0的數就加上2的n次方,這樣既可轉換為無符號的十進位制,再將其十進位製用de...

webpack構建技巧之開發篇

先看下專案目錄 entry dirname src main.js dirname是當前檔案所在資料夾目錄或者 const path require path entry path.resolve dirname,src main.js 乾脆定義個函式 function resolve dir mo...