避免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模块访问