Webpack中library,libraryTarget,externals的区别及作用

经常我们会希望通过script方式引入库，如CDN方式的jquery，我们在使用的时候依旧用require方式，但是却不希望webpack将他编译到文件中。

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

　　因为模块化开发，杜绝一切全局变量，我们想这样去使用他：

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

　　这时，我们需要配置externals

1 2 3 4 5 6 7 8 9

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

　　看看编译后什么变化

1 2 3 4 5 6 7

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

　　实际写个例子，我们经常会有自己处理业务数据的工具库tools.js,传统的方法没有提供UMD的那些功能，只能从window或者global暴露方法

1 2 3

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

　　然后script方式引入

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

　　使用如下

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

　　配置externals改造成模块化开发方式

1 2 3 4 5 6 7 8 9

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

　　此时使用方式

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

　　externals的配置

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

(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

1 2 3 4 5

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

　　接下来配置webpack

1 2 3 4 5 6 7 8 9 10 11 12

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