webpack之externals

external顾名思义外部的外面的，这个参数主要作用就是，可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
有时我们希望我们通过script引入的库，如用CDN的方式引入的jquery，我们在使用时，依旧用require的方式来使用，但是却不希望webpack将它又编译进文件中。<pre> <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script></pre>jquery的使用如下:
<pre>
//我们不想这么用
const $ = window.jQuery
// 而是这么用
const $ = require("jquery")
$("#content").html<code>("<h1>hello world</h1>")</code></pre><p>这时，我们便需要配置externals:</p><pre> module.exports = {
...
output: {
...
libraryTarget: "umd"
},
externals: {
jquery: "jQuery"
},
...
}</pre><p>我们可以看看编译后的文件</p><pre>({
0: function(...) {
var jQuery = require(1);
/* ... /
},
1: function(...) {
// 很明显这里是把window.jQuery赋值给了module.exports
// 因此我们便可以使用require来引入了。
module.exports = jQuery;
},
/ ... */
});</pre>

看一个我们自己的例子

假设我们自己有个工具库，tools.js，它并没有提供给我们UMD的那些功能，只是使用window或者global的方式把工具的对象tools暴露出来
<pre>window.Tools = {
add: function(num1, num2) {
return num1 + num2
}
}</pre><p>接下来把它放在任何页面能够引用到的地方，例如CDN，然后用script的方式引入页面</p><pre><script src="http://xxx/tools.js"></script></pre><p>一般来说我们可能会直接就这么用了</p><pre> const res = Tools.add(1,2)</pre><p>但是既然我们是模块化开发，当然要杜绝一切全局变量了，我们要用require的方式</p><pre>const tools = require('mathTools')
const res = tools.add(1,2)
</pre><p>这是我们再来配置一些externals即可</p><pre>module.exports = {
...
output: {
...
libraryTarget: "umd"
},
externals: {
mathTools: "Tools"
},
...
}</pre>
这里其实是相当于对tools.js进行了shimming处理