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时候的模块名。