這篇文章主要介紹了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
});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
});// 入口文件
output: {
path: './dist',
filename: '[name].dist.js',
library: 'util',
libraryTarget: commonjs2
}var (默认值，发布为全局变量) commonjs commonjs2 amd 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
});
}
