之前一篇文章分析了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 (默認值，發布為全局變量)commonjscommonjs2amdumd