当前位置： 首页 > news >正文

webpack配置排除打包

news 2026/5/24 2:16:42

webpack配置排除打包

思路

  1. 打包时，不要把类似于element-ui第三方的这些包打进来

在这里插入图片描述

  1. 从网络上，通过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配置排除打包 思路 打包时&#xff0c;不要把类似于element-ui第三方的这些包打进来 从网络上&#xff0c;通过url地址直接引入这些包 操作 &#xff08;1&#xff09;先找到 vue.config.js&#xff0c; 添加 externals 项&#xff0c;具体如下&#xff1a; config…...

编程日记 2023/6/3 22:06:54

HNU-操作系统OS-ucoreLab系列-感悟

谨以此片篇，献给熬夜的8个晚上，以及逝去的时光。 感悟： 今天结束了所有的Lab实验（2023.6.3），感慨万千。 喜是这个实验终于结束了，悲是其实有好多地方我都没有理解。 应该指出，由于验收的助教学长学姐们的宽容，HNU实际上在验收这一块的要求还是比较低的。 但是这个…...

编程日记 2023/6/3 22:01:53

MySQL运维篇（三）

五.读写分离 5.1 介绍 读写分离,简单地说是把对数据库的读和写操作分开,以对应不同的数据库服务器。主数据库提供写操作&#xff0c;从数据库提供读操作&#xff0c;这样能有效地减轻单台数据库的压力。 通过MyCat即可轻易实现上述功能&#xff0c;不仅可以支持MySQL&#x…...

编程日记 2023/6/3 21:56:52

Lecture 2 Text Preprocessing

目录 Some DefinitionsReasons for PreprocessingPreprocessing StepsSentence Segmentation 句子分割Binary Classifier 二元分类器Word Tokenization: English 英文词元标记化Word Tokenization: Chinese 中文词元标记化Word Tokenization: German 德语词元标记化Subword Tok…...

编程日记 2023/6/3 21:51:51

web练习第二周

前言&#xff1a;&#xff08;博主个人学习笔记&#xff0c;不用看&#xff09;web练习第二周&#xff0c;仅做出前3题。相比于第一周&#xff0c;难度大幅增加&#xff0c;写题时就算看了wp还是像个无头苍蝇一样到处乱创&#xff0c;大多都是陌生知识点&#xff0c;工具的使用…...

编程日记 2023/6/3 21:46:50

LC-1439. 有序矩阵中的第 k 个最小数组和（二分答案、多路归并）

1439. 有序矩阵中的第 k 个最小数组和 难度困难120 给你一个 m * n 的矩阵 mat&#xff0c;以及一个整数 k &#xff0c;矩阵中的每一行都以非递减的顺序排列。 你可以从每一行中选出 1 个元素形成一个数组。返回所有可能数组中的第 k 个 最小 数组和。 示例 1&#xff1a;…...

编程日记 2023/6/3 21:41:49

一文1000字从0到1实现Jenkins+Allure+Pytest的持续集成

一、配置 allure 环境变量 1、下载 allure是一个命令行工具&#xff0c;可以去 github 下载最新版&#xff1a;https://github.com/allure-framework/allure2/releases 2、解压到本地 3、配置环境变量 复制路径如&#xff1a;F:\allure-2.13.7\bin 环境变量、Path、添加 F:\…...

编程日记 2023/6/3 21:36:48

给一个有序数组生成平衡搜索二叉树(java)

给一个有序数组生成平衡搜索二叉树 给一个有序数组生成平衡搜索二叉树递归生成二叉树专题 给一个有序数组生成平衡搜索二叉树 给定一个有序的数组,用这个数组生成一个平衡搜索二叉树. 这个题还是很简单的,知道什么时平衡搜索二叉树就行了, 左边值小于头节点值,头节点值小于右边…...

编程日记 2023/6/3 21:31:47

【JavaSE】Java基础语法(二十二)：包装类

文章目录 1. 基本类型包装类2. Integer类3. 自动拆箱和自动装箱4. int和String类型的相互转换 1. 基本类型包装类 基本类型包装类的作用 将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法操作该数据常用的操作之一&#xff1a;用于基本数据类型与字符串之间的…...

编程日记 2023/6/3 21:26:46

javascript基础十八：说说你对JavaScript中事件循环的理解​

一、是什么 JavaScript 在设计之初便是单线程&#xff0c;即指程序运行时&#xff0c;只有一个线程存在&#xff0c;同一时间只能做一件事 为什么要这么设计&#xff0c;跟JavaScript的应用场景有关 JavaScript 初期作为一门浏览器脚本语言&#xff0c;通常用于操作 DOM &#…...

编程日记 2023/6/3 21:21:45

详解js中的浅拷贝与深拷贝

详解js中的浅拷贝与深拷贝 1、前言1.1 栈&#xff08;stack&#xff09;和堆&#xff08;heap&#xff09;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.…...

编程日记 2023/6/3 21:16:44

Day9 敏捷测试——敏捷开发的特征、什么是敏捷测试？、极限编程、极限测试

Day9 敏捷测试——敏捷开发的特征、什么是敏捷测试？、极限编程、极限测试 文章目录 Day9 敏捷测试——敏捷开发的特征、什么是敏捷测试？、极限编程、极限测试敏捷开发的特征1、迭代式开发2、增量交付3、及时反馈4、持续集成5、自我管理敏捷开发和迭代式开发的根本区别1、性质…...

编程日记 2023/6/3 21:11:43

k8s 维护node与驱逐pod

1.维护node节点 设置节点状态为不可调度状态&#xff0c;执行以下命令后&#xff0c;节点状态会多出一个SchedulingDisabled的状态&#xff0c;即新建的pod不会往该节点上调度&#xff0c;本身存在node中的pod保持正常运行 kubectl cordon k8s-node01 kubectl get node 2.驱…...

编程日记 2023/6/3 21:06:42

SouapUI接口测试之创建性能测试

SouapUI也是一个能生动的体现一个系统&#xff08;项目&#xff09;性能状态的工具&#xff0c;本篇就来说说如何在SouapUI工具下创建性能测试 一、创建测试用例 由于在《SouapUI接口测试之使用Excel进行参数化》篇已经创建好了测试用例&#xff0c;本篇就不讲解如何创建测试…...

编程日记 2023/6/3 21:01:41

springboot整合kafka入门

kafka基本概念 producer&#xff1a; 生产者&#xff0c;负责发布消息到kafka cluster(kafka集群)中。生产者可以是web前端产生的page view&#xff0c;或者是服务器日志&#xff0c;系统CPU、memory等。 consumer&#xff1a; 消费者&#xff0c;每个consumer属于一个特定的c…...

编程日记 2023/6/3 20:56:40

Rust 笔记：Rust 语言中的字符串

Rust 笔记 Rust 语言中的字符串 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263?spm1001.2101.3001.5343 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/detail…...

编程日记 2023/6/3 20:51:39

华为OD机试真题 Java 实现【将真分数分解为埃及分数】【牛客练习题】

一、题目描述 分子为1的分数称为埃及分数。现输入一个真分数(分子比分母小的分数，叫做真分数)，请将该分数分解为埃及分数。如：8/11 = 1/2+1/5+1/55+1/110。 注：真分数指分子小于分母的分数，分子和分母有可能gcd不为1！ 如有多个解，请输出任意一个。 二、输入描述 输…...

编程日记 2023/6/3 20:46:38

Zemax Lumerical | 二维光栅出瞳扩展系统优化

简介 本文提出并演示了一种以二维光栅耦出的光瞳扩展&#xff08;EPE&#xff09;系统优化和公差分析的仿真方法。 在这个工作流程中&#xff0c;我们将使用3个软件进行不同的工作 &#xff0c;以实现优化系统的大目标。首先&#xff0c;我们使用 Lumerical 构建光栅模型并使用…...

编程日记 2023/6/3 20:41:36

Linux-0.11 文件系统read_write.c详解

Linux-0.11 文件系统read_write.c详解 模块简介 该模块实现了文件系统通用的读写的方法read/write/lseek。 根据文件类型的不同&#xff0c;在内部将调用不同的方法。如果是管道文件&#xff0c;则调用pipe.c中的读写方法&#xff0c;如果是字符设备&#xff0c;则会调用cha…...

编程日记 2023/6/3 20:36:35

什么是用户态和内核态？用户态切换内核态会有什么影响？

一、什么是用户态和内核态&#xff1f; 简单来讲&#xff0c;像使用java开发时&#xff0c;调用java中封装的普通方法程序时属于用户态&#xff0c;而操作内存或者cpu比如 new Thread()创建一个线程&#xff0c;Class.forName(xxx.class)这种属于内核态 用户态和内核态是操作系…...

编程日记 2023/6/3 20:31:34

同事还在手动整理文件，我已经让 Open Claw 全自动搞定了｜Windows 一键部署

⚡OpenClaw 一键安装包&#xff5c;一键部署&#xff0c;告别复杂环境配置⚡ 适配系统 Windows10/11 64 位 当前版本 2.7.5 版本&#xff08;虾壳云版&#xff09; 核心优势 全程可视化操作&#xff0c;无需命令行、无需手动配置 Python/Node.js&#xff0c;内置所有运行…...

编程新知 2026/5/24 1:31:38

如何重塑贴吧体验：贴吧Lite带来的极致纯净浏览革新

如何重塑贴吧体验&#xff1a;贴吧Lite带来的极致纯净浏览革新 【免费下载链接】TiebaLite 贴吧 Lite 项目地址: https://gitcode.com/gh_mirrors/tieb/TiebaLite 厌倦了官方贴吧应用的臃肿体验和无处不在的广告干扰&#xff1f;贴吧Lite作为一款革命性的第三方贴吧客户…...

编程新知 2026/5/24 0:34:30

CNKI-download：3步实现知网文献批量下载与管理的Python自动化工具

CNKI-download&#xff1a;3步实现知网文献批量下载与管理的Python自动化工具 【免费下载链接】CNKI-download :frog: 知网(CNKI)文献下载及文献速览爬虫 (Web Scraper for Extracting Data) 项目地址: https://gitcode.com/gh_mirrors/cn/CNKI-download 你是否曾为手动…...

编程新知 2026/5/23 23:51:11

nvm-setup安装步骤详解

nvm-setup是 Node Version Manager&#xff08;Node.js 版本管理器&#xff09;​ 的安装包。装了它&#xff0c;你就能在一台电脑上随时切换多个 Node.js 版本&#xff0c;做前端开发、跑不同项目的必备工具。一、准备工作安装包下载&#xff1a;https://wwbkk.lanzoub.com/iU…...

编程新知 2026/5/23 23:47:10

【Anaconda】使用指南及问题汇总（自用）

安装 1. Anaconda的下载与安装 除了安装路径修改&#xff0c;其他的一路默认就好 2. Anaconda修改环境变量 因为我们这一步才手动添加环境变量&#xff0c;所以第一步安装的时候不要让它自动配置环境变量了。 用户变量或者系统变量都可以。建议系统变量&#xff0c;方便后…...

编程新知 2026/5/23 19:45:25

避坑指南：用STM32F4的HAL库驱动L298N和TB6612，CubeMX配置有哪些关键点不同？

STM32F4电机驱动实战&#xff1a;L298N与TB6612的CubeMX配置差异全解析 在机器人底盘或智能小车开发中&#xff0c;电机驱动模块的选择直接影响着系统的响应速度、能耗效率和整体稳定性。作为两种经典的有刷直流电机驱动方案&#xff0c;L298N和TB6612在STM32F4开发中各有拥趸。…...

编程新知 2026/5/23 18:29:57

AI 调研平台，以智能技术重构全域调研数字化体系

在各行各业的业务研判、市场分析、工作调研场景中&#xff0c;传统调研模式长期依赖人工采集、手动整理、经验分析&#xff0c;存在明显的技术与效率短板。人工调研数据来源零散、数据清洗繁琐、分析维度单一&#xff0c;不仅耗费大量人力时间&#xff0c;还容易出现数据遗漏、…...

编程新知 2026/5/23 18:20:57

Triton模型服务化实战：从Notebook到高可用推理API

1. 项目概述&#xff1a;这不是一次模型训练&#xff0c;而是一场工程交付“From Notebook to Production: Running ML in the Real World (Part 4)”——这个标题里藏着一个被太多人轻描淡写、却让无数团队在临门一脚时彻底卡死的真相&#xff1a;Notebook 是思考的草稿纸&…...

编程新知 2026/5/23 16:18:10

F3工具深度解析：开源存储设备容量检测与反欺诈技术

F3工具深度解析&#xff1a;开源存储设备容量检测与反欺诈技术 【免费下载链接】f3 F3 - Fight Flash Fraud 项目地址: https://gitcode.com/gh_mirrors/f3/f3 F3&#xff08;Fight Flash Fraud&#xff09;是一个专业的开源存储设备容量检测工具&#xff0c;通过伪随机…...

编程新知 2026/5/23 14:59:18

如何快速上手SVG编辑：免费在线工具Method Draw完全指南

如何快速上手SVG编辑&#xff1a;免费在线工具Method Draw完全指南 【免费下载链接】Method-Draw Method Draw, the SVG Editor for Method of Action 项目地址: https://gitcode.com/gh_mirrors/me/Method-Draw 你是否曾经需要快速创建或编辑矢量图形&#xff0c;却被复…...

编程新知 2026/5/23 14:23:55