webpack4 expose-loader、ProvidePlugin将第三方库的变量暴露在全局变量上、无需导入即可使用的变量

- 日理万妓 2021-07-24 21:04 172阅读 0赞

1、将变量暴露在全局变量上
    	1、下载
    		 cnpm install expose-loader --save-dev
    		 	webpack4:expose-loader@1
    	
    	2、配置
    		方式一:内联loader
    			在文件中,示例:
    				import $ from 'expose-loader?exposes=$,jQuery!jquery'
    					将$和JQuery暴露在全局变量上,如window
    				import {
    				  map,
    				  reduce,
    				} from "expose-loader?exposes=_.map|map,_.reduce|reduce!underscore";
    					将map和reduce方法,分别绑定在全局变量的_.map和_.reduce上
    	 	
    	 	方式二:配置webpack
    	 		module:{
    	 			rules:{
    	 				test:require.resolve('库名'),
    	 				loader:'expose-loader',
    	 				options:{
    	 					(1)exposeloader1版本写法:
    	 						exposes: ["$", "jQuery"],	暴露在全局变量的$和jQuery下
    	 						
    	 					(2)exposeloader2版本写法,2版本需要webpack5:
    		 					exposes:{	
    		 						globalName: "_.filter",	只会暴露模块的filter方法给全局变量下的_.filter
    		 							["_", "find"], 只会暴露filter下的find方法给全局变量下的_
    	              				moduleLocalName: "filter",
    	         
    		 					},
    		 					exposes:"_.map map", 	暴露模块的map方法给_.map,
    		 					多配置写法,延续上方任意写法到一个对象中:
    						    exposes: [
    							     "_.map map",
    							     {
    							       globalName: "_.filter",
    							       moduleLocalName: "filter",
    							     },
    							     {
    							       globalName: ["_", "find"],
    							       moduleLocalName: "myNameForFind",
    							     },
    						    ],
    	 				}
    	 			}
    	 		}
    	 3、使用
    	 	在浏览器端:window.使用
    
    2、配置无需使用import或require语法就可直接使用全局变量,会向所有模块注入局部变量,减小打包体积
    	plugins:[
    		new webpack.ProvidePlugin({
    	      全局变量名称:'库名',
    	      $:'jquery',
    	      x:['库名','方法名']	引入库中的某个方法
    	    }),
    	]