複習webpack4之Library打包

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.Library打包

咱們以前打包都是在項目中打包，若是咱們想開發一個庫，要怎麼打包呢？

如今咱們就模擬開發一個庫，首先npm init -y，建立package.json，而後寫兩個js，裏面寫兩個簡單的函數，而後在index.js中引入這兩個函數。

安裝webpack和webpack-cli。

cnpm install --save webpack webpack-cli
複製代碼

建立webpack.config.js，寫入配置。

當別人使用咱們的庫的時候，引入方式有多是CMD，AMD，ES6三種方式，因此咱們加一個配置項。

有時候，還有可能利用script標籤引入js，這時候就須要再增長一個配置。

這樣，webpack就幫咱們生成了一個全局變量library，就沒有任何問題了。

2.library和libraryTaget

這兩個屬性能夠配合使用，好比這種狀況：

這個組合的意思是，生成一個全局變量，掛載到this上，這時候，就不能用MD，AMD，ES6三種方式引入庫了。還能夠寫成window，global。

3.引入第三方庫

若是咱們的庫引入第三方庫lodash，而用戶使用咱們的庫的時候，又引入了lodash，這樣打包出來的代碼就會包括兩份lodash，因此咱們要增長一個配置來解決這個問題。

這樣打包的時候，就不會把lodash打包到咱們的庫中，可是在使用的過程當中，須要手動引入lodash。

externals除了數組，還能夠寫成對象。

這個意思是，若是使用咱們代碼的環境是commonjs，lodash加載的時候，名字必須爲lodash。

root: '_'的意思是，若是經過script標籤方式引入，就必須在全局註冊一個下劃線變量

最後一種方式的意思是，不管用哪個方式引入，都命名爲lodash。

其實真正寫一個庫的打包配置很麻煩，還包括了一些按需引用的功能，咱們只是作了一個初步的瞭解，等真正要打包庫的時候，再做深刻了解。

若是咱們想讓別人很方便引用咱們的庫，還須要作一些配置，在package.json裏面，把main入口配置成咱們打包生成的文件。

庫寫完了後，能夠去npm官網申請帳號登陸後，在本地命令行中輸入

npm adduser
複製代碼

會讓咱們輸入帳號和密碼，添加完以後，能夠運行

npm publish
複製代碼

這樣就會把代碼發到npm倉庫中，別人使用的時候，npm安裝就可使用了。