【快速搞定Webpack5】修改输出文件目录及自动清理上次打包文件(五)

介绍

默认情况下webpack打包后,我们的图片和js等文件都会被打包到dist目录下,文件多了混淆在一起一方面不利于文件的查找和管理,另外一方面看上去也不美观。
所以今天我们学习的内容就是控制输出后的文件进入不同的目录。
在这里插入图片描述

一、配置

新增47-49行配置

const path = require("path");module.exports = {// 入口entry: "./src/main.js",  // 需要用相对路径// 输出output: {// 文件的输出路径// __dirname nodejs的变量,代表当前文件的文件夹目录path: path.resolve(__dirname, "dist"),   // 需要用绝对路径 需要用的Nodejs的核心模块 path,专门处理路径问题// 文件名filename: "main.js",// filename: "js/main.js",},// 加载器module: {rules: [// loader的配置{test: /\.css$/,     // 只检测.css文件use:[// 执行顺序,从右到左,从下到上"style-loader", // 将js中的css通过创建style标签添加到html文件中生效"css-loader",    // 将css资源编译成commonJs的模块到js中] },{test: /\.less$/,     // 只检测.less文件// loader: "xxx", // 配置中只能使用一个loader,use可以多个use:[// 执行顺序,从右到左,从下到上"style-loader", // 将js中的css通过创建style标签添加到html文件中生效"css-loader",    // 将css资源编译成commonJs的模块到js中"less-loader",    // 将less资源编译成css]},{test: /\.(png|jpe?g|gif|webp)$/,type: "asset",  // 这里使用asset相当于就是webpack4中使用了url-loader来处理parser: {dataUrlCondition: {// 设置小于15k 使用base64// 优点减少请求数量 缺点:文件体积变大maxSize: 15 * 1024, }},// 输出图片名称// [hash:10]hash取值前10位 [ext]文件后缀名 [query]携带参数 ?key=123&m=aaagenerator: {filename: 'images/[hash][ext][query]'}},],},// 插件plugins: [// plugin的配置],// 模式mode: "development",
};

官方手册参考
在这里插入图片描述

二、资源输出

npm webpack

三、效果展示

在这里插入图片描述

介绍

前面学习过程中,我们发现,我们每次打包都需要手动删除dist目录里的文件,这样操作起来比较麻烦。
今天我们学习的内容就是来解决这个问题的,打包前先自动删除dist目录(递归)然后再进行新的文件打包生产。

三、配置

新增第12行

module.exports = {// 入口entry: "./src/main.js",  // 需要用相对路径// 输出output: {// 文件的输出路径// __dirname nodejs的变量,代表当前文件的文件夹目录path: path.resolve(__dirname, "dist"),   // 需要用绝对路径 需要用的Nodejs的核心模块 path,专门处理路径问题// 文件名filename: "main.js",// filename: "js/main.js",clean: true,},......
}

配置完毕后,大家可以将原本的dist目录中的文件名改改,再试试打包效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/693177.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BioTech - 大型蛋白质复合物的组装流程 (CombFold)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/136187314 CombFold是用于预测大型蛋白质复合物结构的组合和分层组装算法,利用AlphaFold2预测的亚基之间的成对相互作用。CombFold的组…

MES系统的功能有哪些?

阅读本文,你将了解:一、MES系统是什么;二、MES系统的功能;三、MES系统的使用场景与案例分析;四、如何更高效地利用MES系统。 这是我们公司正在使用的MES系统,已为大家搭建好模板了,无需下载&…

美团外卖商超销量数据

字段内容: shop_id varchar(50) NOT NULL, shop_id_str varchar(50) NOT NULL, shop_name varchar(400) DEFAULT NULL, shop_min_price varchar(10) DEFAULT NULL, shop_score varchar(10) DEFAULT NULL, shop_wm_score varchar(10) DEFAULT NU…

【Vuforia+Unity】AR02-长方体物体识别

1.创建模型 选择多维长方体图,这个长方体是生活中的真实物体的拍摄图,提前把6个面拍摄好并裁剪干净。 官网创建模型https://developer.vuforia.com/targetmanager/project/targets?projectId0ddbb5c17e7f4bf090834650bbea4995&avfalse 设置长宽高…

0220作业

C语言实现LED1闪烁 led.h #ifndef __LED_H__ #define __LED_H__//RCC寄存器封装 #define RCC_MP_AHB4_ENSETR (*(volatile unsigned int*)0x50000A28) //寄存器封装//GPIO寄存器封装 typedef struct{volatile unsigned int MODER; //00volatile unsigned int OTYPER; //04vol…

java数据结构与算法刷题-----LeetCode144. 二叉树的前序遍历

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 解题思路 利用递归,每次入栈一个结点(每次递归都是…

优思学院【六西格玛案例】美国医院急诊部满意度提升

今天,优思学院来分享一个早期六西格玛项目的案例,项目背景是这样的,多年前,美国犹他州盐湖城的LDS医院已经实施了许多最佳实践。医院提供了床旁登记、高级分诊协议、护理点测试和实时放射学检查。一个强大而全面的持续质量改进计划…

CSS三大定位方式(浮动、定位、弹性盒)详细解析

CSS三大定位方式 前言:作为一名前端开发,已经工作2年了。由于自己是半路出家,从嵌入式方向转到前端开发,都是边百度边开发,很多基础都不了解,只要解决问题就好,但是近来为了让自己知识体系化&a…

北京高考数学填空题真题练一练(2014-2023)

距离2024年高考还有不到四个月的时间,今天我们来看看北京市的高考数学题真题。最近几年,只有北京、天津、上海三个直辖市的高考题是自主命题,其他省份全部是使用教育部统一命题的试卷。而且北京、天津、上海的数学现在也不再区分文理卷了&…

利用iSCSI服务部署IP SAN网络存储服务

一、配置环境(Vmware WorkStation虚拟环境) 服务端与客户端OS:openEuler 22.03-LTS CPU:1U1C 内存:2G 硬盘:5个SCSI磁盘,其中一个作为系统盘,另外四个配置为RAID5阵列 服务器IP…

TOUCHDESIGNER(1-2) 元件

元件来了 一级 二级 三级!!!

2024PMP备考-高质量PMP真题和很详细解析(3)

本专题,华研荟专门为大家讲解最近两年在中国大陆、香港、澳门地区的PMP考试真题,并且提供比较详细的解析,让大家知其然,还知其所以然。帮助大家最后20天有效冲刺,一次性3A通过2024年PMP考试。 2024年PMP考试新考纲-近年…

数据结构:跳表讲解

跳表 1.什么是跳表-skiplist1.1简介1.2设计思路 2.跳表的效率分析3.跳表实现3.1类成员设计3.2查找3.3插入3.4删除3.5完整代码 4.skiplist跟平衡搜索树和哈希表的对比 1.什么是跳表-skiplist 1.1简介 skiplist本质上也是一种查找结构,用于解决算法中的查找问题&…

Python开发户型图编辑器-2D/3D户型图展示

在现代家居设计中,户型图是不可或缺的工具,它为设计师和业主提供了一个直观的展示和规划空间的方式。然而,传统的户型图编辑软件往往复杂难用,限制了设计师的创作灵感。我们为您带来了一款全新的Python开发的户型图编辑器&#xf…

计算机视觉基础:【矩阵】矩阵选取子集

OpenCV的基础是处理图像,而图像的基础是矩阵。 因此,如何使用好矩阵是非常关键的。 下面我们通过一个具体的实例来展示如何通过Python和OpenCV对矩阵进行操作,从而更好地实现对图像的处理。 示例 示例:选取矩阵中指定的行和列的…

Positive Technologies 确保 Rostic‘s 网络应用程序的安全

☑️ PT BlackBox分析 Rostics 网络应用程序的安全性 快餐连锁店在其安全网络开发过程中使用了我们的扫描仪。PT BlackBox 总共扫描了 20 多个 Rostics 的外部服务(每天访问量超过 100,000 人次)和企业服务(每天访问量≈7,000 名员工&#x…

区块链游戏解说:什么是 Nine Chronicles

作者:lesleyfootprint.network 编译:cicifootprint.network 数据源: Nine Chronicles Dashboard 什么是 Nine Chronicles Nine Chronicles 是一款去中心化的在线角色扮演游戏,标志着在线游戏和区块链技术的发展。 Nine Chroni…

小米14 ULTRA:重新定义手机摄影的新篇章

引言 随着科技的飞速发展,智能手机已经不仅仅是一个通讯工具,它更是我们生活中的一位全能伙伴。作为科技领域的佼佼者,小米公司再次引领潮流,推出了全新旗舰手机——小米14 ULTRA。这款手机不仅在性能上进行了全面升级&am…

基于springboot+vue医院电子病历管理系统

一、系统架构 前端:vue | element-ui 后端:springboot | mybatis 环境:jdk1.8 | mysql | maven | node 二、 代码及数据库 三、功能介绍 01. 登录页 02. 用户管理-管理员 03. 用户管理-患者 04. 用户管理-医生 05. 用户管理…

如何实现上拉加载,下拉刷新?

文章目录 一、前言二、实现原理上拉加载下拉刷新 三、案例小结 参考文献 一、前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀的解决方案,如iscroll、better-scroll、pu…