webpack的externals的使用

externals

官网文档解释的很清楚，就是webpack能够不处理应用的某些依赖库，使用externals配置后，依旧能够在代码中经过CMD、AMD或者window/global全局的方式访问。

怎么理解呢？咱们先经过官网说的那个jquery的案例来理解。

有时咱们但愿咱们经过script引入的库，如用CDN的方式引入的jquery，咱们在使用时，依旧用require的方式来使用，可是却不但愿webpack将它又编译进文件中。

 

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

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

 

jquery的使用以下

  // 咱们不想这么用
  // const $ = window.jQuery

  // 而是这么用
  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(...) {
     // 很明显这里是把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.min.js"></script>

通常来讲咱们可能会直接就这么用了

const res = Tools.add(1,2)

可是既然咱们是模块化开发，固然要杜绝一切全局变量了，咱们要用require的方式。

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

　　

这是咱们再来配置一些externals便可

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

关于externals的配置

首先是libraryTarget的配置，咱们上面的例子都是umd 固然它还有其余配置方式，具体就看官网文档吧，咱们能够看到配置成umd即可以使用任何一种引入的方式了