避免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模塊訪問