webpack中配置jquery暴露全局（expose-loader）

• 目录

  源代码

  普通引入

  内联loader使用

  webpack配置全部暴露jquery

  cdn配置

  如何避免引入第三方模块

  最终代码

  ---

• 源代码

链接：https://pan.baidu.com/s/1i45-_KqAgza4qNQfxKvAvQ 
提取码：0tgx

• 普通引入

1、在a.js中添加，npm run dev

var $ = require("jquery");
console.log('$,',$)
console.log('window.$,',window.$)

2、浏览器效果

3、（全局暴露）安装依赖

• 内联loader使用

// var $ from "jquery";
// var $ = require("jquery");
var $ = require("expose-loader?$!jquery");
console.log('$,',$)
// expore-loader 暴露 全局的loader 内联的loader
// loader[pre:前面执行的loader,normal:普通的loader,liader:内联的loader,postloader:后置loader]
// 问:什么叫做内联的loader?
// 答:var $ = require("expose-loader?$!jquery");希望把jquery暴露出去,暴露为"$",暴露给全局上
console.log('内联window.$,',window.$) 

效果图

• webpack配置全部暴露jquery

配置内容

a.js内容如下

var $ = require("jquery");
console.log('$,',$)
console.log('webpack配置——window.$,',window.$) 

效果图

• cdn配置

默认可以拿到$符配置（console.log($)）

a.js

// 在每个模块中注入$对象,利用webpack插件,let webpack = require('webpack')
console.log('$,',$)
console.log('默认拿到——window.$,',window.$) 

webpack.config.js配置

let webpack = require('webpack')

module: {

		rules: [
			// 配置js引用全局暴露
			/* {
				test:require.resolve('jquery'),
				use:'expose-loader?$'
			}, */
			...
	plugins: [ // 数组 放着所有的webpack插件
		new webpack.ProvidePlugin({// 提供插件
			$:'jquery'// 把$用jquery暴露出来,每个模块中都注入$符
		}),
        ...
	]
}

效果图

问题：还是拿不到window.$

• 在index.html引入cdn文件

地址：https://www.bootcdn.cn/jquery/

1、注销

/* new webpack.ProvidePlugin({// 提供插件
            $:'jquery'// 把$用jquery暴露出来,每个模块中都注入$符
        }), */

2、index.html引入cdn

此时如果a.js内容仅仅是console.log(window.$)是有内容的：

如果在index.html中已经引入了cdn，每个js文件中又使用了 import $ from 'jquery';每次打包都会将jquery打包进去，实际上是不应该的

• 如何避免引入第三方模块

• 问题：如何忽略已经可以全局使用的jquery，又写了import呢？

答：externals
 

...... */
	externals: {
		jquery: '$', // jquery: 'jQuery',
	},
	module: {

运行a.js中的效果图如下

import $ from 'jquery'; /* -- 写不写都无所谓,写上去仅仅是个人习惯而已,添加上去,不建议打包进去,因为cdn已经添加 */
console.log('$,', $)
console.log('不打包系列——window.$,', window.$)

• 最终代码

链接：https://pan.baidu.com/s/11MxOCow4G_PuWbiEcob_vQ 
提取码：2r8t 
复制这段内容后打开百度网盘手机App，操作更方便哦