避免CDN引用资源被webpack打包进出口bundle.js文件

解决cdn不做任何配置也同样被打包进webpack的出口文件的问题

先说说为什么使用CDN

1. 打包事件太长，打包1代码体积太大，请求慢
2. 服务器不稳定带宽不高，使用CDN可以回避服务器带宽问题
3. 资源优化

解决方案

使用externals配置项: 防止将某些import包打包到bundle中，而在运行时再去外部获取扩展依赖
·拿jQuery来举例

1. 从CDN引入jQuery

```javascript
<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
```

2. webpack.config.js配置

```javascript
    // ....
    externals: {
        jquery: 'jQuery'
    }
```

3. 这样就解决了那些不需要改动的依赖
具有外部依赖(external dependency)的 bundle 可以在各种模块上下文(module context)中使用

```javascript
import $ from 'jquery';

$('.my-element').animate(/* ... */);
```

对于通过externals设置的外部依赖，可以通过以下几种方式来进行访问

root 全局访问
commonJS模块访问
AMD模块访问