webpack裏的externals

最近在用webpack做一些是sdk相關的東西,有幾個概念總結一下:

1、library
要做sdk,一定要做的一個配置,用於說明最終的SDK暴露給調用者的一個名稱
例如:library: 'HelloJS',
外部調用的時候,就是HelloJS.method,import {**} from HelloJS,又或者是let a = require('HelloJS')

2、libraryTarget
是表示打包出去之後支持外部以一種什麼樣方式引入,global全局?commomJS的require還是ES6的模塊化improt * from HelloJS

一般情況下,我配置libraryTarget: 'umd',就是上面三種都支持,沒問題,這樣就對了

3、externals
表示很多時候我們用了第三方庫,但是又不想讓webpack將它打包到項目種,避免項目太大。這樣就可以通過配置externals
例如,我現在又一個demo,需要引入HelloJS,然後我在demo工程裏配置
externals{

HelloJS: ‘HelloJS’

}
此時demo代碼中可以寫import * from 'HelloJS',是可以在瀏覽器被執行的,雖然最後webpack並沒有將HelloJS打包到demo中,但是index.hmtl需要引用HelloJS,也就是說最終的index文件引入了webpack本身打包的bundle.js加上HelloJS

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章