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，操作更方便哦

webpack中配置jquery暴露全局（expose-loader）相关推荐

webpack中设置jquery为全局对象
通过npm安装jquery npm install jquery -D 然后配置webpack-config.js plugins: [new webpack.ProvidePlugin({$: &q ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
webpack中配置vue
一.下载使用vue 注:因为我们后续是在实际项目中也会使用vue的,所以并不是开发时依赖在main.js中引用vue 重新打包,运行程序,报错: 这个错误说的是我们使用的是runtime-only版 ...
webpack中使用jquery
首先我只有一个js文件,只用在那个文件中引入,因此一下载包 npm install jquery --save 二在使用的jquery的文件顶部输入js代码 import $ from 'jq ...
vue项目，webpack中配置src路径别名及使用
默认会有'@'别名,指向src目录,还可以添加自定义别名等等. 使用方法使用别名一般就三种情况:在js中用,在css中用,在html文档内用 js中用,最简单: import {getName} f ...
从零搭建个人博客(3)-如何在webpack环境下配置jquery和富文本编辑器Simditor
无论是博主自己写文章还是读者发表评论,都需要一个方便的编辑框,html自带的textarea和editable div都过于简单,本文将记录在webpack环境中添加jquery和Simditor的过 ...
Maven基础5：Maven基本概念，仓库配置（在setting中配置本地仓库和远程仓库）；全局setting和局部setting；
说明: (1) 介绍了修改本地仓库地址.远程仓库地址.全局setting和局部setting: 目录 1.修改本地仓库的位置: 2.远程仓库配置:(即,我们默认从哪个远程仓库,下载资源) 附加:全局s ...
webpack --- [读书笔记] webpack中常用的一些配置项
1. Webpack 当前Web开发面临的困境文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级JavaScript特性兼容程度低 1.1 webpack概述 webpack是 ...

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

源代码

普通引入

内联loader使用

webpack配置全部暴露jquery

cdn配置

如何避免引入第三方模块

最终代码

webpack中配置jquery暴露全局（expose-loader）相关推荐

最新文章

热门文章