webpack配置排除打包
webpack配置排除打包
思路
- 打包时，不要把类似于element-ui第三方的这些包打进来
- 从网络上，通过url地址直接引入这些包
操作
（1）先找到 vue.config.js， 添加 externals 项，具体如下：
configureWebpack: {// 配置单页应用程序的页面的标题// 省略其他....externals: {/*** externals 对象属性解析。* 基本格式：* '包名' : '在项目中引入的名字'* */'vue': 'Vue','element-ui': 'ELEMENT','cos-js-sdk-v5': 'COS'},resolve: {alias: {'@': resolve('src')}}
}
再次运行打包，我们会发现包的体积已经大幅减小：上面的三个包已经不在打包的目标文件中了。但是，对应的项目也跑不起来了： 缺少了js文件。
(2）在public/index.html中采用外链引入排除的文件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= webpackConfig.name %></title><link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script><script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js" ></script></body>
</html>
（3）再次打包。
效果OK
webpack配置排除打包-根据当前环境动态配置
注意，在开发项目时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用环境变量来进行区分。
具体配置-在生产环境时生效
具体如下：
动态设置externals
在**vue.config.js**文件中：
let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {externals = {/*** externals 对象属性解析：* '包名' : '在项目中引入的名字'*/'vue': 'Vue','element-ui': 'ELEMENT','cos-js-sdk-v5': 'COS'}cdn = {css: ['https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css' // element-ui css 样式表],js: [// vue must at first!'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js', // vuejs'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js', // element-ui js'https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js', // xlsx]}
}
webpack配置externals配置项
configureWebpack: {// 配置单页应用程序的页面的标题name: name,
+ externals: externals,resolve: {alias: {'@': resolve('src')}}
}
注入配置到html模板
（1）
在vue.config.js中，设置config.plugin('html')，如下4项
chainWebpack(config) {config.plugin('preload').tap(() => [{rel: 'preload',fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],include: 'initial'}])// 省略其他......// 注入cdn变量 (打包时会执行)
+ config.plugin('html').tap(args => {
+ args[0].cdn = cdn // 配置cdn给插件
+ return args
+ })// 省略其他...
}
（2）
找到 public/index.html 通过配置CDN Config 依次注入 css 和 js。内容如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= webpackConfig.name %></title><% for(var css of htmlWebpackPlugin.options.cdn.css) { %><link rel="stylesheet" href="<%=css%>"><% } %></head><body><noscript><strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><% for(var js of htmlWebpackPlugin.options.cdn.js) { %><script src="<%=js%>"></script><% } %></body>
</html>打包 ，检查效果
npm run build:prod
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<% } %>
#### 打包 ，检查效果```js
npm run build:prod
检查生成的index.html中是否有css引入和js引入
相关文章：
webpack配置排除打包
webpack配置排除打包 思路 打包时，不要把类似于element-ui第三方的这些包打进来 从网络上，通过url地址直接引入这些包 操作 （1）先找到 vue.config.js， 添加 externals 项，具体如下： config…...
HNU-操作系统OS-ucoreLab系列-感悟
谨以此片篇，献给熬夜的8个晚上，以及逝去的时光。 感悟： 今天结束了所有的Lab实验（2023.6.3），感慨万千。 喜是这个实验终于结束了，悲是其实有好多地方我都没有理解。 应该指出，由于验收的助教学长学姐们的宽容，HNU实际上在验收这一块的要求还是比较低的。 但是这个…...
MySQL运维篇（三）
五.读写分离 5.1 介绍 读写分离,简单地说是把对数据库的读和写操作分开,以对应不同的数据库服务器。主数据库提供写操作，从数据库提供读操作，这样能有效地减轻单台数据库的压力。 通过MyCat即可轻易实现上述功能，不仅可以支持MySQL&#x…...
Lecture 2 Text Preprocessing
目录 Some DefinitionsReasons for PreprocessingPreprocessing StepsSentence Segmentation 句子分割Binary Classifier 二元分类器Word Tokenization: English 英文词元标记化Word Tokenization: Chinese 中文词元标记化Word Tokenization: German 德语词元标记化Subword Tok…...
web练习第二周
前言：（博主个人学习笔记，不用看）web练习第二周，仅做出前3题。相比于第一周，难度大幅增加，写题时就算看了wp还是像个无头苍蝇一样到处乱创，大多都是陌生知识点，工具的使用…...
LC-1439. 有序矩阵中的第 k 个最小数组和（二分答案、多路归并）
1439. 有序矩阵中的第 k 个最小数组和 难度困难120 给你一个 m * n 的矩阵 mat，以及一个整数 k ，矩阵中的每一行都以非递减的顺序排列。 你可以从每一行中选出 1 个元素形成一个数组。返回所有可能数组中的第 k 个 最小 数组和。 示例 1：…...
一文1000字从0到1实现Jenkins+Allure+Pytest的持续集成
一、配置 allure 环境变量 1、下载 allure是一个命令行工具，可以去 github 下载最新版：https://github.com/allure-framework/allure2/releases 2、解压到本地 3、配置环境变量 复制路径如：F:\allure-2.13.7\bin 环境变量、Path、添加 F:\…...
)
给一个有序数组生成平衡搜索二叉树(java)
给一个有序数组生成平衡搜索二叉树 给一个有序数组生成平衡搜索二叉树递归生成二叉树专题 给一个有序数组生成平衡搜索二叉树 给定一个有序的数组,用这个数组生成一个平衡搜索二叉树. 这个题还是很简单的,知道什么时平衡搜索二叉树就行了, 左边值小于头节点值,头节点值小于右边…...
【JavaSE】Java基础语法(二十二)：包装类
文章目录 1. 基本类型包装类2. Integer类3. 自动拆箱和自动装箱4. int和String类型的相互转换 1. 基本类型包装类 基本类型包装类的作用 将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法操作该数据常用的操作之一：用于基本数据类型与字符串之间的…...
javascript基础十八：说说你对JavaScript中事件循环的理解
一、是什么 JavaScript 在设计之初便是单线程，即指程序运行时，只有一个线程存在，同一时间只能做一件事 为什么要这么设计，跟JavaScript的应用场景有关 JavaScript 初期作为一门浏览器脚本语言，通常用于操作 DOM &#…...
详解js中的浅拷贝与深拷贝
详解js中的浅拷贝与深拷贝 1、前言1.1 栈（stack）和堆（heap）1.2 基本数据类型和引用数据类型1.2.1 概念1.2.2 区别1.2.3 基本类型赋值方式1.2.4 引用类型赋值方式 2、浅拷贝2.1 概念2.2 常见的浅拷贝方法2.2.1 Object.assign()2.2.…...
Day9 敏捷测试——敏捷开发的特征、什么是敏捷测试？、极限编程、极限测试
Day9 敏捷测试——敏捷开发的特征、什么是敏捷测试？、极限编程、极限测试 文章目录 Day9 敏捷测试——敏捷开发的特征、什么是敏捷测试？、极限编程、极限测试敏捷开发的特征1、迭代式开发2、增量交付3、及时反馈4、持续集成5、自我管理敏捷开发和迭代式开发的根本区别1、性质…...
k8s 维护node与驱逐pod
1.维护node节点 设置节点状态为不可调度状态，执行以下命令后，节点状态会多出一个SchedulingDisabled的状态，即新建的pod不会往该节点上调度，本身存在node中的pod保持正常运行 kubectl cordon k8s-node01 kubectl get node 2.驱…...
SouapUI接口测试之创建性能测试
SouapUI也是一个能生动的体现一个系统（项目）性能状态的工具，本篇就来说说如何在SouapUI工具下创建性能测试 一、创建测试用例 由于在《SouapUI接口测试之使用Excel进行参数化》篇已经创建好了测试用例，本篇就不讲解如何创建测试…...
springboot整合kafka入门
kafka基本概念 producer： 生产者，负责发布消息到kafka cluster(kafka集群)中。生产者可以是web前端产生的page view，或者是服务器日志，系统CPU、memory等。 consumer： 消费者，每个consumer属于一个特定的c…...
Rust 笔记：Rust 语言中的字符串
Rust 笔记 Rust 语言中的字符串 作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263?spm1001.2101.3001.5343 邮箱 ：291148484163.com 本文地址：https://blog.csdn.net/qq_28550263/article/detail…...
华为OD机试真题 Java 实现【将真分数分解为埃及分数】【牛客练习题】
一、题目描述 分子为1的分数称为埃及分数。现输入一个真分数(分子比分母小的分数，叫做真分数)，请将该分数分解为埃及分数。如：8/11 = 1/2+1/5+1/55+1/110。 注：真分数指分子小于分母的分数，分子和分母有可能gcd不为1！ 如有多个解，请输出任意一个。 二、输入描述 输…...
Zemax Lumerical | 二维光栅出瞳扩展系统优化
简介 本文提出并演示了一种以二维光栅耦出的光瞳扩展（EPE）系统优化和公差分析的仿真方法。 在这个工作流程中，我们将使用3个软件进行不同的工作 ，以实现优化系统的大目标。首先，我们使用 Lumerical 构建光栅模型并使用…...
Linux-0.11 文件系统read_write.c详解
Linux-0.11 文件系统read_write.c详解 模块简介 该模块实现了文件系统通用的读写的方法read/write/lseek。 根据文件类型的不同，在内部将调用不同的方法。如果是管道文件，则调用pipe.c中的读写方法，如果是字符设备，则会调用cha…...
什么是用户态和内核态？用户态切换内核态会有什么影响？
一、什么是用户态和内核态？ 简单来讲，像使用java开发时，调用java中封装的普通方法程序时属于用户态，而操作内存或者cpu比如 new Thread()创建一个线程，Class.forName(xxx.class)这种属于内核态 用户态和内核态是操作系…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
腾讯云V3签名
想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。 可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...