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

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:['库名','方法名']	引入库中的某个方法
	    }),
	]

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/113697187