今天就跟大家聊聊有關(guān)如何使用webpack構(gòu)建一個js庫，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
公司主營業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出息烽免費做網(wǎng)站回饋大家。
在前文中，我說過本系列文章的受眾是在現(xiàn)代前端體系下能夠熟練編寫業(yè)務(wù)代碼的同學(xué)，因此本文在介紹 webpack 配置時，僅提及構(gòu)建一個庫所特有的配置，其余配置請參考 webpack 官方文檔。
構(gòu)建一個庫與構(gòu)建一個一般應(yīng)用最大的不同點在于構(gòu)建完成后輸出的產(chǎn)物。
一般應(yīng)用構(gòu)建完成后會輸出：
雖然輸出的資源非常多，但實際上所有的依賴、加載關(guān)系都已經(jīng)從 html 文件開始一層一層定下來了，換句話說，這個 html 文件實際上就是整個應(yīng)用的入口。
一個庫構(gòu)建完成后會輸出：
庫的入口分別是上面羅列的 js 文件；你可能會奇怪，一個庫怎么會有3個入口文件呢？莫急，且聽我一一道來。
CommonJS是 Node.js 推行的一種模塊化規(guī)范，主要語法包括module.exports、require()等；而我們在使用 webpack 引入 npm 包時，實際上是處于 Node.js 環(huán)境，由此可知，這個 CommonJS 格式的入口 js 文件（<庫名稱>.common.js）是供其它應(yīng)用在 Node.js 環(huán)境下引入 npm 包使用的。由于在引用 npm 包時一般不會過多考慮 npm 包的體積（在構(gòu)建自己的應(yīng)用時如有需要可自行壓縮），且為了方便調(diào)試，因此該 js 入口文件是沒有經(jīng)過壓縮的。
UMD是一個模塊化規(guī)范大雜燴，除了兼容 CommonJS 外，它還兼容 AMD模塊化規(guī)范，以及最傳統(tǒng)的全局變量模式。
這邊稍微介紹一下 AMD 規(guī)范， AMD 全稱 Asyncchronous Module Definition ，一般應(yīng)用在瀏覽器端（這是與 CommonJS規(guī)范最大的不同點），最著名的 AMD 加載器是 RequireJS。目前由于 webpack 的流行， AMD 這一模塊化方案已逐漸退出市場。
全局變量模式就很好理解了，就是把庫的入口掛載在一個全局變量（如window.xxx）上，頁面上的任何位置都能隨時取用，屬于最傳統(tǒng)的 js 插件加載方案。
由上可知， UMD 格式的入口 js 文件，既可以用于引用 npm 包的場景（未壓縮的版本，即<庫名稱>.umd.js），也可以直接用于瀏覽器端（已壓縮的版本，即<庫名稱>.umd.min.js）。
目前， webpack 不支持同時生成多份入口 js 文件，因此需要分多次來進(jìn)行構(gòu)建。
關(guān)鍵的 webpack 配置是：
重慶分公司
重慶分公司
output.libraryTarget: "commonjs2"output.libraryTarget: "umd"對于 UMD ，我們還需要設(shè)置全局變量名稱，即output.library: "LibraryName"。
為了壓縮構(gòu)建出來的文件，最簡單的方法是在 CLI 中調(diào)用 webpack 命令時帶上 mode參數(shù)，如webpack --mode=production；這是因為當(dāng) mode 的值為production時， webpack 會自動啟用 UglifyJsPlugin對源碼進(jìn)行壓縮。
我在某公司工作時，該公司對第三方依賴抓得很緊，所有在項目里使用的第三方依賴都必須申請且審核通過后才可使用；且申請時是精確到具體版本的，未申請的軟件版本也一概不允許使用。某些第三方依賴無論在文件內(nèi)容上，還是在文件名稱上，都沒有體現(xiàn)出版本號，這就對我們識別這類第三方依賴產(chǎn)生障礙，這是我們開發(fā)自己的庫時需要引以為戒的。
在構(gòu)建庫時，我們完全可以利用 webpack 把庫的信息直接輸出到文件內(nèi)容里，有了這“身份信息”，用戶使用起來也會格外安心。
輸出庫版本信息的方法是使用 webpack.BannerPlugin ，最簡單的使用方法如下：
const pgk = require('./package.json');
const banner = `
${pkg.name}
${pkg.description}\n
@version v${pkg.version}
@homepage ${pkg.homepage}
@repository ${pkg.repository.url}\n
(c) 2019 Array-Huang
Released under the MIT License.
hash: [hash]
`;
/* webpack 配置 */
{
// ...其它配置
plugins: [
// ...其它 plugin 配置
new webpack.BannerPlugin(banner);
]
}最終生成出來的效果是：
/*! * * vue-directive-window * Vue.js directive that enhance your Modal Window, support drag, resize and maximize. * * @version v0.7.5 * @homepage https://github.com/Array-Huang/vue-directive-window * @repository git+https://github.com/Array-Huang/vue-directive-window.git * * (c) 2019 Array-Huang * Released under the MIT License. * hash: dc6c11a1e50821f4444a * */
如果庫的用戶是直接通過在瀏覽器里加載你的庫來使用的話，那么提供一份 source map文件是非常有必要的；這是因為你的庫在經(jīng)過 webpack 構(gòu)建，甚至壓縮后，與源代碼已經(jīng)大相徑庭了，用戶將難以在瀏覽器中進(jìn)行調(diào)試；但如果你能為自己的庫附上一份 source map ，瀏覽器開發(fā)者工具會調(diào)用 source map 來幫助解析，用戶的調(diào)試體驗會更接近于調(diào)試庫的源碼。
相應(yīng)的 webpack 配置為：
// webpack 配置
{
// ...其它配置
devtool: 'cheap-module-source-map'
}webpack 支持多種類型的 source map ，不同類型的 source map 在生成速度、支持功能（如 babel ）、調(diào)試位置偏移等問題上均有不同表現(xiàn)，我這邊只做推薦：
關(guān)于其它類型的 source map ，請查看 webpack 官方文檔的 devtool 章節(jié)。
與一般應(yīng)用不一樣，在開發(fā)庫的時候，我們應(yīng)盡量避免引入第三方庫（構(gòu)建過程中使用的工具鏈除外），因為這些第三方庫會讓我們寫的庫的大小猛增；很可能會出現(xiàn)這樣的情況：我們自己寫的小功能只有幾百行代碼的邏輯，構(gòu)建出來的庫卻有幾百k，那這樣的庫意義就不大了。
但我們的確也很難避免使用第三方庫，那該咋辦呢？
// webpack 配置
{
// ...其它配置
externals: {
lodash: {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_'
}
}
}使用上述配置后，我們構(gòu)建出來的庫中就不會包含配置中指定的第三方庫（例子中為lodash）了，下面來一一詳解：
commonjs和commonjs2項都是指明用戶在 node.js 環(huán)境下使用當(dāng)前庫時，以 CommonJS的方式來加載名為lodash的 npm 包。amd項表示在瀏覽器中加載運行本庫時，本庫會試圖以 AMD的方式來加載名為lodash的 AMD 模塊。root項表示在瀏覽器中加載運行本庫時，本庫會試圖取全局變量window._（通過