webpack之externals

描述：

external顾名思义外部的、外面的，这个参数主要作用就是，可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
有时我们希望我们通过script引入的库，如用CDN的方式引入的jquery，我们在使用时，想依旧用require的方式来使用，但是却不希望webpack将它又编译进文件中。

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
// 我们不想这么用
const $ = window.jQuery
// 而是这么用
const $ = require("jquery")

$("#content").html<code>("<h1>hello world</h1>")
</script>

这时，我们便需要在webpack.conf.js文件中配置externals

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

我们可以看看编译后的文件

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

看一个我们自己的例子

假设我们自己有个工具库，tools.js，它并没有提供给我们UMD的那些功能，只是使用window或者global的方式把工具的对象tools暴露出来

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

接下来把它放在任何页面能够引用到的地方，例如CDN，用script的方式引入页面

// 引入
<script src="http://xxx/tools.js"></script>
// 一般来说我们可能会直接就这么用了
const res = Tools.add(1,2);

但是既然我们是模块化开发，当然要杜绝一切全局变量了，我们要用require的方式

const tools = require('mathTools')
const res = tools.add(1,2);

这时我们再来webpack.conf.js文件中配置一些externals即可

module.exports = {
...
output: {
  ...
  libraryTarget: "umd"
},
externals: {
  mathTools: "Tools"
},
...
}

这里其实是相当于对tools.js进行了shimming处理。