（15）webpack externals

最新推荐文章于 2024-07-05 17:12:56 发布
最新推荐文章于 2024-07-05 17:12:56 发布
阅读量650 收藏
点赞数
分类专栏： webpack 文章标签： externals webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/glorydx/article/details/109451588
版权
webpack的externals属性用于排除不需要打包的库，如cdn引入的jquery。它能防止这些库被错误地包含在打包文件中，从而减小项目体积。通过在index.html中引入cdn链接，并设置externals，可以确保项目正确引用外部资源而不打包。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

externals 是用来解决不需要打包的库，避免打包后的体积过于庞大。

在实际的开发中，很多库可以采用cdn的方式引入。比如jquery,并不需要通过node 安装jquery而是采用链接的方式直接引入

 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

当然还有很多ui库 bootstrap或者element-ui 是可以通过cdn引入的。
vue和react实际上都可以通过cdn的方式引入,但开发者实际有各自的需求和配置，所以并不建议这么做。

问题来了，当你使用cdn引入jquery，之后，webpack打包还是会将jquery打包进项目，我们可以通过externals ，解决这个问题


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    


                



	

		

			

				
					
webpack externals键值研究

				
			

			

				

					Superman_peng的博客
				

				

					06-11
					
					369
					
				

			

		

		

			
				
做性能优化缩小打包体积时，利用externals+cdn方案，防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖。
能够了解externals的键为依赖的包名
但对于这个externals的值就有点迷了，官方文档上给的解释是酱紫的：


关键的一句话是：为了替换jquery模块，jQuery的值将被用来检索一个全局的jQuery变量
对于这句话我的理解是：import $ from 'jquery'中，原始没配置过externa

			
		

	



                

            
              



	

		

			

				
					
webpack-external-import:从其他Webpack捆绑包动态导入模块。 单独应用之间的无痛代码共享

				
			

			

				

					05-02
				

			

		

		

			
				
Webpack外部导入 import（）来自第三方的其他块和模块，或其他webpack自己构建！ 在运行时！ 现在这是Webpack 5的一部分-不要使用外部导入，请在此处阅读更多信息： ://module-federation.github.io/    该项目已被...

			
		

	



              


  
              

                


	

		

			

				
					
webpack externals

				
			

			

				

					全栈修炼
				

				

					08-14
					
					2341
					
				

			

		

		

			
				
webpack externals详解
在众多的webpack配置教程中，对externals这个配置选项，总是一带而过，把文档中提到的几种方式都复述一遍，但是对于开发者而言，根本没法完全理解。本文试图通过一整篇文章，详细的对externals这个参数进行讲解。
几种用法
externals这个参数的传入形式有多种，但是总结而言，实际上就是array > object，reg，这三种形式都可以传入，前者其实是对后者的包含。
array形式
数组内的每一个元素又可以是多种形式，包括object, reg

			
		

	





	

		

			

				
					
Webpack的externals的理解

				
			

			

				

					山海一哥的博客
				

				

					04-27
					
					1万+
					
				

			

		

		

			
				
webpack官网介绍：
防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。


webpack的externals
上面的信息是什么意思呢？
你可以通过script方式引入后，在文件中直接使用$这里是没有问题的，如果你使用了eslint，它会提示你该变量未定义。但是如果...

			
		

	



		

			
		



	

		

			

				
					
Webpack externals

				
			

			

				

					lio-zero 的博客
				

				

					02-24
					
					234
					
				

			

		

		

			
				
Webpack externals 告诉 Webpack 从 bundle 中排除某个导入。external 通常用于排除将通过 CDN 加载的导入。
例如，假设您使用 Vue 和 Express 实现服务器端渲染，但客户端代码通过 CDN 导入 Vue。假设您有以下 component.js 文件：
const Vue = require('vue')

module.exports = Vue...

			
		

	





	

		

			

				
					
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件

				
			

			

				

					02-06
				

			

		

		

			
				
html-webpack-externals-plugin  :police_car_light: 已淘汰 :police_car_light:  抱歉，该模块已不再维护，其功能已由jharris4， 和。  您可能会遇到问题，并且最近的Webpack项目尚未使用它。  与一起使用以使用...

			
		

	





	

		

			

				
					
Webpack--externals(外部扩展)详解

					
热门推荐

				
			

			

				

					weixin_39964419的博客
				

				

					10-14
					
					1万+
					
				

			

		

		

			
				
externals用法详解

			
		

	





	

		

			

				
					
webpack external 详解

				
			

			

				

					qq_41167198的博客
				

				

					11-21
					
					886
					
				

			

		

		

			
				
webpack external 详解

			
		

	





	

		

			

				
					
webpack之externals解析

				
			

			

				

					少油少盐不要辣
				

				

					07-20
					
					1843
					
				

			

		

		

			
				
1.是什么
可以指定排除掉不想被webpack打包的模块。一般适用于库的开发。
2.既然模块不被打包，那么项目中的引入语句如何处理呢？
webpack会根据你对模块的配置，将引入语句，编译生成对应环境下引入语句。
3.如何使用
具体参见官方文档，下面说下要点。

如果库的打包为UMD格式的，即：libraryTarget: 'umd'，那么需要配置一个对象。如：

 externals: {
    lodash: {
      commonjs: 'lodash',
      amd: 'lodash

			
		

	





	

		

			

				
					
webpack 的externals配置

					
最新发布

				
			

			

				

					AM1n98的博客
				

				

					07-05
					
					1322
					
				

			

		

		

			
				
webpack 中的 externals 配置提供了的方式。如果需要引用一个库或文件，但是又不让它被webpack打包（减少打包的时间+减少打包后的bundle文件体积），且不影响在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals来实现。

			
		

	





	

		

			

				
					
webpack 使用外部的库_22-webpack进阶模块2

				
			

			

				

					weixin_39534002的博客
				

				

					12-28
					
					174
					
				

			

		

		

			
				
一、noparse背景webpack导入的模块会分析依赖项，但是如果针对单独的项目也分析依赖会消耗webpack的性能解决方案为webpack添加noparse属性module: {noParse: /jquery|lodash/,}二、IgnorePlugin背景针对插件会存在多语言版本，webpack打包会把所有的语言版本进行打包，从而使得大打包文件存在代码赘余。解决方法使用内部插件webpa...

			
		

	





	

		

			

				
					
webpack配置externals汇总

				
			

			

				

					青云码上的博客
				

				

					07-19
					
					971
					
				

			

		

		

			
				
webpack@5.88.1
vue@2.7.14
vue-router@3.6.5
element-ui@2.15.13
ant-design-vue@1.7.8
externals用于提取第三方依赖包，使用cdn资源的方式将第三方依赖包引入项目，可以大大减少项目打包体积
配置externals对象有技巧：

key 就是  import aaa from 'bbb'中的bbb
value 可...

			
		

	





	

		

			

				
					
webpack打包优化之外部扩展(Externals)配置

				
			

			

				

					彭世瑜的博客
				

				

					08-05
					
					3069
					
				

			

		

		

			
				
index.html
打开控制台，输入 可以看到是一个函数了webpack.config.js
相当于告诉webpack, 当代码中引入 的时候，使用 替换
更多示例

			
		

	





	

		

			

				
					
webpack 的externals配置 (externals有啥用)

				
			

			

				

					qq_37899792的博客
				

				

					12-03
					
					8562
					
				

			

		

		

			
				
为什么要配置externals

官网解释：

webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。


怎么理解呢，意思是如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window...

			
		

	





	

		

			

				
					
『Webpack系列』—— externals用法详解

				
			

			

				

					树上骑个猴的博客
				

				

					11-01
					
					8113
					
				

			

		

		

			
				
本文用项目例子是用Vue Cli3搭建的Vue项目

如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。
下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js这个文件里面地内容。
npm install webpack-bundle-analyzer --save-dev


在vue.config.js中引入这插件
const Bu.

			
		

	





	

		

			

				
					
优化项目通过引入webpack的externals加载外部cdn资源

				
			

			

				

					web_gutianle的博客
				

				

					06-12
					
					876
					
				

			

		

		

			
				
为什么通过引入webpack的externals加载外部cdn资源？
因为通常引入资源是根据important语法导入第三方依赖包最终会打包到同一个文件中，从而导致单文件打包文件体积过大
因此有了以下方案


最后可以把main.js中把引入的第三方依赖包去掉

...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
可缺不可滥

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值