libwebpackplugin 的誕生
由于作者做的 map-web 前端項(xiàng)目（一個(gè)基于 WebGL引擎項(xiàng)目）踏堡，需要引入3d引擎代碼庫(kù)相關(guān)文件猎唁， 發(fā)現(xiàn)在引入 webgl 文件夾時(shí)候 ，每次需要手動(dòng) 復(fù)制 / 粘貼到 map-web 項(xiàng)目中顷蟆，包括版本測(cè)試诫隅，發(fā)版本等等。
這種手動(dòng)的重復(fù)性勞動(dòng)非常浪費(fèi)相關(guān)開發(fā)人員的精力帐偎，因此整理了下公司前端與底層webgl的自動(dòng)化項(xiàng)目構(gòu)建方案逐纬。（ 本人是強(qiáng)迫癥患者 -。- ）
起初腦海里面有兩個(gè)方案：
通過 npm 包方式 進(jìn)行引入和版本管理
相當(dāng)于每次底層構(gòu)建完 webgl 底層項(xiàng)目削樊，修改相應(yīng) package 版本豁生，然后 npm publish 到 npm 服務(wù)器兔毒，前端項(xiàng)目通過 npm install 的方式進(jìn)行引入。通過 服務(wù)鏈接提供方式 進(jìn)行引入和版本管理
相當(dāng)于每次構(gòu)建完 webgl 底層項(xiàng)目后甸箱， push 構(gòu)建后的代碼到自己的 cdn 服務(wù)器上育叁，使用人員通過 script 腳本進(jìn)行引入http://xxx.cdn.com/1.0.0/webgl.js。
（這里需要注意一下版本的控制芍殖，由于緩存影響豪嗽，這里采用版本號(hào)即文件夾形式進(jìn)行控制，同時(shí)還方便了歷史版本管理围小， 每次構(gòu)建項(xiàng)目到版本號(hào)對(duì)應(yīng)的文件夾下面 昵骤，類似/ dist /webgl.js -> / x.x.x /webgl.js树碱，
至于 cdn 緩存的相關(guān)知識(shí)不是本文重點(diǎn)這里不作介紹 感興趣可查看緩存相關(guān)資料）
適合自己的才是最好的
在實(shí)踐的過程中發(fā)現(xiàn)肯适， 由于構(gòu)建項(xiàng)目文件數(shù)量多以及單個(gè)文件大小過大 （webgl js 需要3M多），通過方案一方式進(jìn)行進(jìn)行管理成榜，每次底層webglx項(xiàng)目 build -> npm publish 與
前端項(xiàng)目 npm install -> build 的過程框舔，在時(shí)間的耗費(fèi)上是很恐怖的。
因此做了對(duì)比之后果斷拋棄了這種方案赎婚， 因?yàn)榉桨付?只在 build -> npm pulish 耗費(fèi)時(shí)間刘绣，在前端項(xiàng)目中只需要 script 引入外部資源就可以。
為了追求更加的方便
在做完底層庫(kù)的構(gòu)建流程優(yōu)化之后挣输，又有新的思考纬凤，在前端項(xiàng)目中（作者做的都是偏向 spa 項(xiàng)目），引入webgl 資源時(shí)候撩嚼，難道每次版本測(cè)試或者版本發(fā)布都需要手動(dòng)的去替換 script 對(duì)應(yīng)版本鏈接的 src 嗎停士？
腦海里第一反應(yīng)就是 需要添加一個(gè) 外部資源版本配置文件，只需要修改 外部資源 版本號(hào)就可以完丽， 在 build 時(shí)候?qū)崿F(xiàn)自動(dòng)化添加修改 script 的相應(yīng)版本 src 鏈接到 html 中恋技。類似：
// lib.config.js
module.exports = {
libs: [{
name: "lib1-name ",
version: "x.x.x", // 通過配置來修改此版本號(hào)
path: "http://xxx.xxx.com"
}, {
name: "lib2-name ",
version: "x.x.x",
path: "http://xxx.xxx.com"
}]
}
// webpack.config.js
const LibWebpackPlugin = require("lib-webpack-plugin");
const libs = require("./lib.config.js").libs;
module.exports = {
entry: "",
output: {},
plugins: [
new LibWebpackPlugin(libs)
]
}
個(gè)人感覺 配置文件除了解耦和方便管理的好處，還避免你不夠細(xì)心的話 手動(dòng)錯(cuò)誤修改了 src
至此初步方案已經(jīng)成型逻族。
因此 lib-webpack-plugin 誕生了蜻底。
libwebpackplugin 的第一個(gè)版本
首先這是一個(gè) webapck 插件， 既然是插件 就要先了解 webpack 的 Compiler模塊 和 hooks 機(jī)制, 中文鏈接附上 compiler-hook 聘鳞。
由于本插件基于 html-webpack-plugin 插件薄辅，因此還需要了解 此插件的相關(guān) hooks
libwebpackplugin 的具體使用和源代碼可以查看 lib-webpack-plugin
由于這是第一個(gè)版本， 功能很簡(jiǎn)單抠璃，只是暫時(shí)滿足了初步應(yīng)用长搀，我會(huì)繼續(xù)優(yōu)化迭代下一個(gè)版本 ??
其他
很意外的是，居然有人開始引用這個(gè)插件了（目前只是一個(gè)待優(yōu)化的初略版本）鸡典，看來大家在做項(xiàng)目的時(shí)候都有這方面的需求源请，這給我繼續(xù)迭代下個(gè)版本無形中又加了不少動(dòng)力。（手動(dòng)比 ??）
