這篇文章主要介紹了webpack組織模組打包Library的原理及實現，現在分享給大家，也給大家做個參考。
先前一篇文章分析了Webpack打包JS模組的基本原理，所介紹的案例是最常見的一種情況，即多個JS模組和一個入口模組，打包成一個bundle文件，可以直接被瀏覽器或其它JavaScript引擎執行，相當於直接編譯產生一個完整的可執行的檔案。不過還有一個很常見的情況，就是我們要建立發佈一個JavaScript的函式庫，像是你在npm社群發佈自己的函式庫，這時Webpack就需要對應的配置，編譯產生的程式碼也會略有不同。
和之前一篇文章一樣，本文主要分析的是Webpack的生成程式碼，並結合它來說明編譯函式庫時Webpack那些關於library的設定選項的具體作用，相應的官方文件在這裡。
寫JS的函式庫
我們還是從簡單的案例開始，我們隨便寫一個簡單的函式庫util.js：
import $ from 'jquery'
function sayHello() {
console.log("Hello");
}
function hideImages() {
$('img').hide();
}
export default {
sayHello: sayHello,
hideImages: hideImages
}登入後複製
提供了兩個函數，當然它們之間毫無關係，也實際上沒有任何卵用，純粹是僅供教學參考。 。 。
接下來寫Webpack的設定：
// 入口文件
entry: {
util: './util.js',
}
// 输出文件
output: {
path: './dist',
filename: '[name].dist.js'
}登入後複製
但僅僅這樣是不夠的，這樣輸出的檔案就是一個立即執行的函數，最後會回到util.js的exports，參考上一篇文章中分析，最後產生的bundle程式碼結構大致上是這樣的：
(function(modules) {
var installedModules = {};
function webpack_require(moduleId) {
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,
'/path/to/jquery.js': generated_jquery
});登入後複製
##它如果執行完，那就結束了，將util.js的export部分回傳而已，而我們需要的是將這個回傳值交給編譯後的檔案的module.export，這樣編譯後的檔就成了一個可以被別人import的庫。所以我們希望得到的編譯檔應該是這樣的：
module.exports = (function(modules) {
var installedModules = {};
function webpack_require(moduleId) {
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,
'/path/to/jquery.js': generated_jquery
});登入後複製
#要得到這樣的結果，Webpack設定output部分需要加入library資訊：
// 入口文件
output: {
path: './dist',
filename: '[name].dist.js',
library: 'util',
libraryTarget: commonjs2
}登入後複製
這裡最重要的就是libraryTarget，我們現在採用commonjs2的格式，就會得到上面的編譯結果，也就是說Webpack會library把最後的輸出以CommonJS的形式export出來，這樣就實現了一個函式庫的發布。
其它發布格式
除了commonjs2，libraryTarget還有其它選項：
var (默认值，发布为全局变量)
commonjs
commonjs2
amd
umd
登入後複製
使用不同的選項，編譯出來的檔案就能夠在不同JavaScript執行環境中使用。這裡我們直接看萬金油umd格式的輸出是怎麼樣的：
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object') // commonjs2
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("util", [], factory); // amd
else if(typeof exports === 'object')
exports["util"] = factory(); // commonjs
else
root["util"] = factory(); // var
}) (window, function() {
return (function(modules) {
var installedModules = {};
function webpack_require(moduleId) {
// ...
}
return webpack_require('./util.js');
}) ({
'./util.js': generated_util,
'/path/to/jquery.js': generated_jquery
});
}登入後複製
比之前的commonjs2的情況要複雜得多，因為它需要處理各種不同的case，但其實後面的部分都是一樣的，最重要的就是最前面的幾行，這是umd模組的標準寫法。它運行傳入的factory函數，實際上就是載入模組的函數，然後把傳回的結果根據不同的運行環境交給對應的物件。例如var，那就會把結果設為一個全域變量，這用於瀏覽器透過
