13 Webpack中的配置-Externals

Externals

Externals告诉Webpack那些模块不需要打包，这些模块依赖于外部环境，一般是通过外部环境提供的。比如jQuery的使用，通过Npm可以把jQuery模块下载到本地引入使用：

import $ from 'jquery';

像jQuery这种三方库，同时也提供了CDN资源：

<script src="https://code.jquery.com/jquery-3.1.0.js" crossorigin="anonymous"></script>

在使用script引入jQuery之后，在全局提供了jQuery这个全局变量,如果还想使用import语法导入就需要进行如下配置：

module.exports = {
    
    
    /* 其他配置 */
    externals: {
    
    
        jquery: 'jQuery'
    }
}

这里将导入语句里的jquery替换成全局变量jQuery。

如此一来，把jQuery抽离了出去，其引用由外部环境提供，这里通过CDN引入jQuery是外部环境提供实现的一种方式，外部环境提供还可以使用Npm下载的包，比如当使用Vue或者React等前端框架编写通用组件的时候，也可以配置Externals，使得该组件内部依赖的Vue或React模块依赖于集成该组件的项目中的Vue或React模块。

使用Externals减少了我们最后打包Bundle的大小，节约了请求时的带宽。