Webpack中library,libraryTarget,externals的區別及作用

經常我們會希望通過script方式引入庫，如CDN方式的jquery，我們在使用的時候依舊用require方式，但是卻不希望webpack將他編譯到文件中。

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

　　因為模塊化開發，杜絕一切全局變量，我們想這樣去使用他：

const $ = require("jquery");
$("#content").html("<h1>hello world</h1>");

　　這時，我們需要配置externals

module.exports = {
     output: {
           libraryTarget: "umd"
     },
     externals: {
           jquery: "jQuery"  
    },
    ...   
}

　　看看編譯后什么變化

({   0: function(...) { var jQuery = require(1); 
     }, 1: function(...) { 
       module.exports = jQuery; // 這里是把window.jQuery賦值給了module.exports
                                             // 因此可以使用require來引入
    },
    /* ... */
})            

　　實際寫個例子，我們經常會有自己處理業務數據的工具庫tools.js,傳統的方法沒有提供UMD的那些功能，只能從window或者global暴露方法

window.Tools = {
　　add: function (num1, num2) { return num1 + num2 },
}

　　然后script方式引入

<script src="http://xxx/tools.min.js"></script>

　　使用如下

const res = Tools.add(1,2);

　　配置externals改造成模塊化開發方式

module.exports = {
     output: {
           libraryTarget: "umd"
     },
     externals: {
           jquery: "jQuery"  
    },
    ...   
}

　　此時使用方式

const tools = require("myTools");
const res = tools.add(1,2);

　　externals的配置

1.首先是libraryTarget的配置，我們使用umd方式，這樣便可以用任何一種引入方式，即支持cmd，amd，及全局

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之類的
        module.exports = factory(require('jquery'));
    } else {
        // 瀏覽器全局變量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    方法
    function myFunc(){};
 
    //    暴露公共方法
    return myFunc;
}));

2.library和libraryTarget的使用

有時我們想開發一個庫，如lodash，underscore這些工具庫，這些庫既可以用commonjs和amd方式使用也可以用script方式引入。

這時候我們需要借助library和libraryTarget，我們只需要用ES6來編寫代碼，編譯成通用的UMD就交給webpack了。

例如上面的tools

exports default {
    add: function (num1, num2) {
         return num1 + num2;  
    }          
}

　　接下來配置webpack

module.exports = {
  entry: {
        myTools: "./src/tools.js"      
    },
  output: {
        path: path.resolve(_dirname, "build"),
        filename: [name].js,
        chunkFilename: [name].min.js,
        libraryTarget: "umd",
        library: "tools"    
   }           
}

　　library指定的是你require時候的模塊名。