摘要：所以你編譯后的文件實(shí)際上應(yīng)當(dāng)只輸出，這就需要在配置里用來控制這樣上面的模塊加載函數(shù)會在返回值后面加一個(gè)，這樣就只返回的部分。

之前一篇文章分析了Webpack打包JS模塊的基本原理，所介紹的案例是最常見的一種情況，即多個(gè)JS模塊和一個(gè)入口模塊，打包成一個(gè)bundle文件，可以直接被瀏覽器或者其它JavaScript引擎執(zhí)行，相當(dāng)于直接編譯生成一個(gè)完整的可執(zhí)行的文件。不過還有一種很常見的情況，就是我們要構(gòu)建發(fā)布一個(gè)JavaScript的庫，比如你在npm社區(qū)發(fā)布自己的庫，這時(shí)Webpack就需要相應(yīng)的配置，編譯生成的代碼也會略有不同。

和之前一篇文章一樣，本文主要分析的是Webpack的生成代碼，并結(jié)合它來說明編譯庫時(shí)Webpack那些關(guān)于library的配置選項(xiàng)的具體作用，相應(yīng)的官方文檔在這里。

我們還是從簡單的案例開始，我們隨便編寫一個(gè)簡單的庫util.js：

import $ from "jquery"

function sayHello() {
  console.log("Hello");
}

function hideImages() {
  $("img").hide();
}

export default {
  sayHello: sayHello,
  hideImages: hideImages
}

提供了兩個(gè)函數(shù)，當(dāng)然它們之間毫無關(guān)系，也實(shí)際上沒有任何卵用，純粹是僅供教學(xué)參考。。。

接下來寫Webpack的配置：

// 入口文件
entry: {
  util: "./util.js",
}

// 輸出文件
output: {
  path: "./dist",
  filename: "[name].dist.js"
}

但僅僅這樣是不夠的，這樣輸出的文件就是一個(gè)立即執(zhí)行的函數(shù)，最后會返回util.js的exports，參照上一篇文章中分析，最后生成的bundle代碼結(jié)構(gòu)大致是這樣的：

(function(modules) {
  var installedModules = {};
  
  function webpack_require(moduleId) {
     // ...
  }

  return webpack_require("./util.js");
}) ({
  "./util.js": generated_util,
  "/path/to/jquery.js": generated_jquery
});

它如果執(zhí)行完，那就結(jié)束了，將util.js的export部分返回而已，而我們需要的是將這個(gè)返回值交給編譯后的文件的module.export，這樣編譯后的文件就成了一個(gè)可以被別人import的庫。所以我們希望得到的編譯文件應(yīng)該是這樣的：

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
});

要得到這樣的結(jié)果，Webpack配置output部分需要加入library信息：

// 入口文件
output: {
  path: "./dist",
  filename: "[name].dist.js",

  library: "util",
  libraryTarget: commonjs2
}

這里最重要的就是libraryTarget，我們現(xiàn)在采用commonjs2的格式，就會得到上面的編譯結(jié)果，也就是說Webpack會library把最后的輸出以CommonJS的形式export出來，這樣就實(shí)現(xiàn)了一個(gè)庫的發(fā)布。

其它發(fā)布格式

除了commonjs2，libraryTarget還有其它選項(xiàng)：

var (默認(rèn)值，發(fā)布為全局變量)
commonjs
commonjs2
amd
umd

使用不同的選項(xiàng)，編譯出來的文件就能夠在不同JavaScript執(zhí)行環(huán)境中使用。在這里我們直接看萬金油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的情況要復(fù)雜得多，因?yàn)樗枰幚砀鞣N不同的case，但其實(shí)后面的部分都是一樣的，最重要的就是最前面的幾行，這是umd模塊的標(biāo)準(zhǔn)寫法。它運(yùn)行傳入的factory函數(shù)，實(shí)際上就是加載模塊的函數(shù)，然后把返回的結(jié)果根據(jù)不同的運(yùn)行環(huán)境交給相應(yīng)的對象。例如var，那就會把結(jié)果設(shè)置為一個(gè)全局變量，這用于瀏覽器通過