2017-12-26__webpack.externals.md

笔记

webpack的externals参数的一些使用 文档

指定 webpack 打包时不要打包这部分，将这部分的依赖关系从外部引进，通常在开发库的时候会有用，比如开发一些基于 vue 的库，打包时就应该把 vue 设置到 externals 中。

key 指定需要被exclude的包 value 有5种数据类型选择

• string

<script src='https://unpkg.com/vue/dist/vue.min.js'></script>

externals: {
  vue: 'Vue'
}

import Vue from 'vue'

// Vue === window.Vue

让webpack打包时，使用挂载在全局上的 Vue

• array

• object

这个会比较常用，被exclude的库将会去设定的各种模块系统中查找

externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // indicates global variable
  }
}

上述 lodash 可以采用 commonjs amd <script> 的方式引入

• function

采用函数对各种情况做何种处理

例如可以排除所有从 node_modules 引入的库，采用外部 cdn

externals: [
  function(context, request, callback) {
    if (/^yourregex$/.test(request)){
      return callback(null, 'commonjs ' + request);
    }
    callback();
  }
]

'commonjs ' + request 用来定义模块的类型

• regex

满足当前的规则的module都会被exclude

externals: /^(jquery|\$)$/i

例如所有的 jqeury 无论大小写 或者写成 $ 都会被exclude