外部扩展

防止将某些 import 的包 (package) 打包到 bundle 中，而是在运行时 (runtime) 再去从外部获取这些扩展依赖 (external dependencies)。所创建的 bundle 依赖于那些存在于用户环境 (consumer's environment) 中的依赖。

比如，从 CDN 引入 Vue，而不把它打包到 bundle 中

index.html

1	<script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>

webpack.config.js

module.exports = {
  //...
  externals: {
    vue: 'Vue'
  }
}

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

1
2
3

import Vue from 'vue'

Vue.use(VueClipboard)

string

类似于上面的例子，属性名是 vue，表示排除了 import Vue from 'vue' 中的 vue 模块。为了替换这个模块，Vue 的值将被用来检索一个全局的 Vue 变量。

array

module.exports = {
  //...
  externals: {
    subtract: ['./math', 'subtract']
  }
}

subtract: ['./math', 'subtract'] 转换为父子结构，其中 ./math 是父模块，而 bundle 只引用 subtract 变量下的子集。

object

module.exports = {
  externals : {
    lodash : {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_' // 指向全局变量
    }
  },

  // 或者

  externals : {
    subtract : {
      root: ['math', 'subtract']
    }
  }
}

此语法用于描述外部 library 所有可用的访问方式。这里 lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问，但在全局变量形式下用 _ 访问。subtract 可以通过全局 math 对象下的属性 subtract 访问（例如 window['math']['subtract']）。

function

参照官网externals function

regex

匹配给定正则表达式的每个依赖，都将从输出 bundle 中排除。

module.exports = {
  //...
  externals: /^mint-ui$/i
}

这个示例中，所有名为 mint-ui 的依赖（忽略大小写）都会被外部化。