webapck的externals对象的key和value解释

最新推荐文章于 2022-10-14 10:11:25 发布
最新推荐文章于 2022-10-14 10:11:25 发布
阅读量851 收藏 2
点赞数 3
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aexwx/article/details/106923133
版权

webapck的externals属性

key是指from后面的那个值

value是import后面得值

实测，如果是jquery的话，如下配置即可,也是遵循上述的交叉法则

之前想过改成import jq from 'jquery',然后把$全改成jq,但失败了，原因是通过传统的script标签加载jquery后，得到的变量默认是$

如果要改成jq,还要配置额外的noConflict()

 

大猫会长
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack externals键值研究
Superman_peng的博客
06-11 273
做性能优化缩小打包体积时，利用externals+cdn方案，防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖。 能够了解externals的键为依赖的包名 但对于这个externals的值就有点迷了，官方文档上给的解释是酱紫的： 关键的一句话是：为了替换jquery模块，jQuery的值将被用来检索一个全局的jQuery变量 对于这句话我的理解是：import $ from 'jquery'中，原始没配置过externa
nuxt-node-externals-module:一个nuxt模块，用于添加webpack-node-externals
04-27
nuxt节点外部模块设置npm i nuxt-node-externals-module用法{ modules : [ // add it as the last module [ 'nuxt-node-externals-module' , { whitelist : [ / ^ vue-cli-plugin-apollo / , / ^ vuetify / ] , } , ...
webpack externals 深入理解
weixin_33722405的博客
11-22 670
按照官方文档的解释，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用。 假设：我们开发了一个自己的库，里面引用了lodash这个包，经...
Webpack--externals(外部扩展)详解
weixin_39964419的博客
10-14 1万+
externals用法详解
『Webpack系列』—— externals用法详解
树上骑个猴的博客
11-01 7754
本文用项目例子是用Vue Cli3搭建的Vue项目 如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。 下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js这个文件里面地内容。 npm install webpack-bundle-analyzer --save-dev 在vue.config.js中引入这插件 const Bu.
对external的理解
weixin_46611729的博客
03-12 926
external在 vue.config.js 文件中的 configureWebpack 对象下面 例子： // 要排除的包名 // key(是要排除的包名）: value(实际上是实际引入的包的全局的变量名) // 因为要排除 element-ui 所以后面要引入 CDN 文件，CDN 文件中有 ELEMENTUI 的全局变量名 // webpack打包的时候会根据 externals 的配置，首先会排除掉定义的包名（这些包不需要打包） // 空出来的位置，会用变量来替换 externals = {
rocketmq-externals-master.zip
09-17
RocketMQ-Externals是RocketMQ项目的一部分，包含了与RocketMQ主仓库相关的外围组件和工具。 在RocketMQ-externals-master.zip这个压缩包中，我们预计会找到RocketMQ控制台的源代码。RocketMQ控制台是一个用于监控...
rocketmq-externals-master
05-06
RocketMQ-Externals-Master是Apache RocketMQ项目的一部分，它包含了一些额外的工具和组件，主要是为了增强RocketMQ的管理和监控能力。RocketMQ是一个高性能、分布式的消息中间件，广泛应用于大数据处理和实时业务...
webpack之externals解析
少油少盐不要辣
07-20 1740
1.是什么 可以指定排除掉不想被webpack打包的模块。一般适用于库的开发。 2.既然模块不被打包，那么项目中的引入语句如何处理呢？ webpack会根据你对模块的配置，将引入语句，编译生成对应环境下引入语句。 3.如何使用 具体参见官方文档，下面说下要点。 如果库的打包为UMD格式的，即：libraryTarget: 'umd'，那么需要配置一个对象。如： externals: { lodash: { commonjs: 'lodash', amd: 'lodash
webpack中external的使用
rolinabc的博客
10-09 1789
在我们日常开发中，经常能够听到‘跨域’这个字眼，那么跨域是什么呢？ 跨域其实是由浏览器的同源策略造成的 那么同源策略又是什么呢？ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 什么又是同源呢？ 如果两个 URL 的 协议、域名、端口号都相同的话，则这两个 URL 是同源。 具体看下面的表格...
Webpack的externals的理解
山海一哥的博客
04-27 1万+
webpack官网介绍： 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。 webpack的externals 上面的信息是什么意思呢？ 你可以通过script方式引入后，在文件中直接使用$这里是没有问题的，如果你使用了eslint，它会提示你该变量未定义。但是如果...
配置webpack中externals来减少打包后vendor.js的体积
w13707470416的博客
12-19 1457
在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。 webpack的外部扩展(externals)可以有效的解决。externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于...
vue脚手架打包排除第三方依赖（项目瘦身）- externals
jingchao1998的博客
09-20 3047
vue脚手架打包排除第三方依赖（项目瘦身）- externals 方法 首先在 vue.config.js 中加入如下内容 module.exports = { // 主体 ...... configureWebpack: config => { config.plugins.forEach((val) => { // 这里加这个判断主要目的是获取到脚手架中的插件 HtmlWebpackPlugin if (JSON.stri
vue打包优化
weixin_44707050的博客
04-12 1122
1.下载webpack打包分析插件 npm install webpack-bundle-analyzer --save-dev 2.package.json中，scripts->build 添加--report "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report" }, 3.创建vue.config.js文件 const BundleAn
webpack之前端性能优化的实现
油墨香^-^的博客
08-27 184
但这样的话虽然可以提取公共代码，但我们会把runtime（webpack运行时的代码，一会在打包原理中会再次提到）也放到vendor中，这里面会维护一个trunk的文件列表，类似于这样，就是说我们改任意的代码，这个table里面的hash会变，所以vendor的hash也会变。，所以这没有实现真正的持久化缓存。这里面一共有三个参数，第一个是我当前文件的trunkid，它是唯一标识符，就是指main的trunkid，第二个就是打包的所有文件的模块函数，第三个是我要立即执行的trunkid模块函数。...
webpack 的externals配置 (externals有啥用)
qq_37899792的博客
12-03 7843
为什么要配置externals 官网解释： webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。 怎么理解呢，意思是如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window...
transpileDependencies与babel编译顺序释义
热门推荐
大赚万万亿
09-07 1万+
如果transpileDependencies为true或为正则，接着再看package.json里的browserslist是否处在低级浏览器范围，如果处在低级浏览器范围内，那么会把node_modules里用得到的高级语法进行babel编译。如果transpileDependencies为false,则会把node_modules里用到的高级语法原封不动的打包，会造成在低级浏览器访问报错的情况。babel.config.js配置如下，此配置同样适用于vue-cli999。
webpack中，devServer.proxy跨域无效的解决办法
大赚万万亿
05-08 8146
webpack配置 需要留意2个细节，那就是发起请求时，网址不要填写完整域名，用/开头即可。 第一个细节： 错误请求的网址： 正确网址，用/开头即可 第二个细节 如果使用了axios,那么axios.defaults.baseURL这个功能一定要注释掉！ 如果使用了axios,那么axios.defaults.baseURL这个功能一定要注释掉！ 如果使用了axi...
vue开启gizp 怎么和 externals 一起使用
最新发布
09-01
在Vue中启用gzip压缩和使用externals插件可以通过以下步骤完成。 1. 首先，确保已在项目中安装了相关的依赖。使用npm或yarn命令安装gzip和externals插件： ``` npm install compression-webpack-plugin --save-dev npm install --save-dev vue-cli-plugin-externals ``` 2. 在Vue项目的配置文件vue.config.js中进行以下配置： ```javascript const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new CompressionPlugin({ test: /\.js$|\.html$|\.css$/, // 匹配需要压缩的文件类型 threshold: 10240, // 超过此大小才会进行压缩，单位为字节 deleteOriginalAssets: false // 是否删除原文件 }) ] }, pluginOptions: { externals: { moduleType: 'window', // 类型为window，表示将依赖作为全局变量引入 globalName: 'lodash', // 依赖的全局变量名称 name: 'lodash', // 依赖的包名 replaceGlobalName: 'lodash' // 如果已存在全局变量，是否替换 } } }; ``` 3. 保存配置文件后，重新运行项目即可看到gzip压缩和externals插件生效。压缩后的文件将存储在dist目录中，并且externals插件会将指定的依赖作为全局变量引入到项目中。 使用这种方式可以有效地减小文件大小并提升加载速度，同时减少了对资源的加载和请求，提高了页面性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值