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

解决cdn不做任何配置也同样被打包进webpack的出口文件的问题
先说说为什么使用CDN

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

解决方案
使用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模块访问