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

共计 623 个字符，预计需要花费 2 分钟才能阅读完成。

解决 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 模块访问