脚本宝典收集整理的这篇文章主要介绍了避免CDN引用资源被webpack打包进出口bundle.js文件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
解决cdn不做任何配置也同样被打包进webpack的出口文件的问题
先说说为什么使用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模块访问
以上是脚本宝典为你收集整理的避免CDN引用资源被webpack打包进出口bundle.js文件全部内容，希望文章能够帮你解决避免CDN引用资源被webpack打包进出口bundle.js文件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。