組內負責的幾個專案都有一些一樣的公共元件，所以就著手搭建了個公共元件開發腳手架，第一次開發 library，所以是參考著 iview 的配置來搭建的。記錄如何使用webpack4搭建乙個library的腳手架。webpack4 搭建 vue 專案
使用 webpack4，需要安裝 webpack 和 webpack-cli
yarn add webpack webpack-cli -d我寫的 library 的目錄結構如下，僅供參考，主要是模仿iview的結構，其中部分配置參考了vue-cli的 webpack 配置檔案。
├─build
│ build.js // 用於執行構建
│ check-versions.js // vue-cli 留下的，主要就是檢查npm版本和node版本
│ webpack.base.conf.js // 通用配置
│ webpack.dev.conf.js // 開發環境
│ webpack.dist.prod.conf.js // 用於生成library的** -- hbf.min.js
│ webpack.prod.conf.js // 用於生成example檔案的打包**，這個其實是沒有必要的.
│├─dist
│ └─example // example生成的打包資料夾，可以通過githubpage來預覽，或者本地使用anywhere預覽
│ hbf.min.js // library 檔案
│├─example // example目錄
│ index.html
│ main.js
│├─lib
│ │ index.js // 全量引入公共元件，並暴露出來，包含install方法可供vue引入使用該外掛程式
│ │ readme.md
│ │
│ └─components // 公共元件
│├─package.json // 專案包依賴
為了更好的理解，先來了解下 webpack 編譯後的**。
經過webpack處理過的**通常都是如下所示
// webpack編譯後的**
/** @param modules
*/;(function(modules) , // 作為結果返回.
}// 呼叫modules陣列的某個元素（型別為函式）
modules[moduleid].call(
module.exports,
module,
module.exports,
__webpack_require__
)return module.exports
} return __webpack_require__(0)
})([
/** 省略了**， 該陣列的每一項代表乙個模組，實際是乙個函式，接受三個引數，module物件，module.exports物件，__webpack_require__函式 **/
])
iife函式，接受乙個modules: array引數。
對於模組處理，無論是es module的import還是commonjs的require都轉化為__webpack_require__這個函式來引入模組。
__webpack_require__函式，會從modules陣列的第乙個元素開始(moduleid 為 0，也就是入口檔案)，執行該模組（實為乙個函式）的邏輯，利用傳入的module.exports的資料型別為引用型別object，間接地給module.exports新增屬性。
return __webpack_require__(0)
從入口檔案開始，逐個引入依賴模組，最後返回入口模組的module.exports
此時這個編譯後的 js 檔案，是無法被其他模組所引用的，只在當前作用域內有效，webpack就提供了建立 library 的方式，就是在output裡定義library和librarytarget。使得構建完的 js 可以供其他模組引入使用。
對於作為乙個 library 使用的專案來說，output 選項需要設定 library
// webpack.dist.pord.conf.js
output: ,
library可以是字串，也可以是物件，(物件僅限於librarytarget的值為umd的情況下使用)
output: ,
librarytarget: 'umd'
}
commonjs和commonjs2的區別。
commonjs規範就是定義了乙個exports物件，而nodejs在實現的時候，在commonjs規範的前提下做了一些擴充套件，定義了module.exports，從而也叫這種為commonjs2規範。
我們在引用別人的庫的時候，通常都是可以通過多種方法引入的，比如```
輸出
可以像使用其他 vue 外掛程式庫/元件庫一樣使用。
import hbf from 'hbf-public-components'
// 使用use方法觸發hbf的intall方法，註冊全部元件
vue.use(hbf)
default變數，則使用另外一種方式全量引入
import * as hbf from 'hbf-public-components'import from 'hbf-public-components'es2015 module規範，則不需要安裝任何外掛程式，webpack 會對其進行tree-shaking，去除未引用的**。
前面提過，webpack的tree-shaking是由uglylify外掛程式實現的，我在開發環境下，沒有啟用uglylify來壓縮**，所以檢視模組打包圖，會發現整個庫都被引入了，雖然我只引入了乙個元件。webpack4在生產環境下，才會進行tree-shaking，設定mode的值為production就會開啟生產環境下的優化。
如果是使用commonjs規範的 library 則需要乙個外掛程式支援，babel-plugin-import。該外掛程式是ant官方開發的。許多 ui 元件庫的按需引入也是依賴於這個外掛程式。
安裝yarn add babel-plugin-import -d
修改.babelrc檔案，
"plugins": [
["import", ]
],
迭代更新的公用元件庫來說，使用 npm 包的話，會比較不方便，經常更新的公共元件**可以使用git subtree（教程）來維護，可以等到一定地步之後，公共元件庫穩定下來之後再考慮發布乙個 npm 包。
而開發乙個元件庫，也可以使用 rollup.js 來搭腳手架，rollup.js預設使用的就是es2015 module，可以進行靜態分析，去除未引用的**，tree-shaking也是rollup.js先提出的。rollup相比較於webpack，更適合用於構建library，vue.js就是使用rollup構建的。webpack在**分割這方面比較有優勢，所以webpack相對來說比較適合構建應用程式，不過使用 webpack 構建 library 也是可以的。
這個專案也可以用做 webpack 構建 library 的通用腳手架。下次再嘗試rollup構建 library
有幫助的話，可以給個star的話就最好啦。有問題也可以聯絡我。
關於模組規範，以及 webpack，babel 是如何編譯轉換模組的文章
webpack4配置乙個多頁面
因為專案是用glpu搭建的工作流，在轉jenkins自動發布的時候，考慮到如果需要多頁面動態打包，需要改寫glup配置 不會glup也不想學 就將專案重構為webpack4.掃瞄專案多頁面入口 區分生產和開發環境webpck配置 指定專案打包 使用shell指令進行打包操作 如何處理不同的模組模式 ...
webpack4 基本使用
webpack是基於node構建，所以wepack支援所有node api和語法。即 chrome瀏覽器能支援的ecmascript語法 排除dom bom wbpack都能支援。chrome不支援es6，所以webpack也不支援。建立基本的webpack4.x專案 建立後的目錄 其中 packa...
手動搭建webpack4框架（二）
module 處理 css 檔案的 loader 處理 的 loader 處理 字型的 loader 處理 sass 檔案的 loader 處理 less 檔案的 loader 處理 vue 檔案的 loader babel plugin proposal class properties babe...