webpack:详解CopyWebpackPlugin,复制的同时修改文件内容

摘要

CopyWebpackPlugin 是一个强大的 Webpack 插件,用于将文件从源目录复制到构建目录。在本文中,我们将探讨 CopyWebpackPlugin 的一些常用 API,并提供示例代码。

在构建 Web 应用程序时,通常需要将一些静态文件(如 HTML、CSS、图片等)从源目录复制到构建目录。为了实现这一功能,我们可以使用 CopyWebpackPlugin。这个插件可以将源文件复制到构建目录,并且可以自定义复制行为。

常用 API

  1. patterns:一个数组,包含要复制的源文件和目标文件的信息。每个数组元素都是一个对象,其中包含以下属性:
  • from:源文件路径或模式。可以是字符串或正则表达式。
  • to:目标文件路径。可以是字符串或函数。
  • toType:目标文件类型。可以是 'file''dir'。默认值是 'file'
  • flatten:是否将源文件复制到目标文件的子目录中。默认值是 false
  • transform:一个函数,用于在复制文件之前对源文件进行转换。
  1. options:一个对象,包含一些全局选项,如 concurrency(并发复制的文件数)和 overwrite(是否覆盖已存在的文件)。
  2. filter

示例

下面是一个简单的 CopyWebpackPlugin 配置示例:

const CopyPlugin = require('copy-webpack-plugin');module.exports = {plugins: [new CopyPlugin({patterns: [{from: 'src/index.html',to: 'dist/index.html'},{from: 'src/assets',to: 'dist/assets'},{from: 'src/images',to: 'dist/images',toType: 'dir'},{from: 'src/styles.css',to: 'dist/styles.css',transform: (content, path) => minifyCSS(content)},{from: '**/*',to: './',globOptions: {ignore: ['**/*.js', '**/*.scss', '**/*.ts']}},{from: "public/**/*",filter: async (resourcePath) => {const data = await fs.promises.readFile(resourcePath);const content = data.toString();if (content === "my-custom-content") {return false;}return true;},},],options: {concurrency: 10,overwrite: true}})]
};

在这个示例中,我们创建了一个 CopyWebpackPlugin 实例,并指定了要复制的文件和目录。第一个模式将 src/index.html 文件复制到 dist/index.html 文件,第二个模式将 src/assets 目录复制到 dist/assets 目录,第三个模式将 src/images 目录复制到 dist/images 目录,第四个模式将 src/styles.css 文件复制到 dist/styles.css 文件,并在复制之前对内容进行转换(例如,压缩 CSS)。我们还指定了一些全局选项,如并发复制的文件数和是否覆盖已存在的文件。

文档

npmjs.com/package/copy-webpack-plugin

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

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

相关文章

数据治理-定义数据治理运营框架

开发数据治理的基本定义很容易,但是创建一个组织采用的运营框架可能很困难。在构建组织的运营框架时需要考虑以下几个方面: 数据对组织的价值。如果一个组织出售数据,显然数据治理具有巨大的业务影响力。将数据作为最有价值事物的组织将需要…

Unity中程序集dll

一:前言 一个程序集由一个或多个文件组成,通常为扩展名.exe和.dll的文件称为程序集,.exe是静态的程序集,可以在.net下直接运行加载,因为exe中有一个main函数(入口函数),.dll是动态链接库&#…

腾讯mini项目-【指标监控服务重构】2023-08-04

今日已办 关于 span-references 的调研 https://github.com/DataDog/dd-trace-js/issues/1761 https://github.com/open-telemetry/opentelemetry-specification/blob/874a451e7f6ac7fc54423ee3f03e5394197be35b/specification/compatibility/opentracing.md#span-references h…

基于springboot的OA人事办公管理系统

经典 oasys(OA自动化办公系统) 办公自动化(OA)是面向组织的日常运作和管理,员工及管理者使用频率最高的应用系统,极大提高公司的办公效率。 项目介绍 oasys是一个OA办公自动化系统,使用Maven进行项目管理。基于springboot框架开…

为什么要使用设计模式,以及使用设计模式的好处

在软件开发中,衡量软件质量只要包含如下指标: 正确性可维护性可读性可扩展性简洁性可测试性健壮性灵活性可复用性 然而,对于一些刚入行的新程序员来说,往往会注意不到上面这些问题,从而产生了一些让人头皮发麻的烂代…

【css】深入理解flex属性

参考文章: 深入理解Flex属性 flex弹性布局教程-05-项目属性flex-shrink flex:flex-grow flex-shrink flex-basis flex:0 1 0 如何计算flex布局,有flex-shrink和flex-grow的情况下,每个元素的大小 flex-grow生效公式如…

mongodb 安装

yum 安装 阿里镜像库 , 注意不要用阿里自带的系统 , 要用centos镜像 # 创建一个 .repo 文件 vi /etc/yum.repos.d/mongodb-org.repo# 添加内容[mongodb-org] name MongoDB Repository baseurl https://mirrors.aliyun.com/mongodb/yum/redhat/$releasever/mongodb-org/4.4/…

谷粒商城----rabbitmq

一、 为什么要用 MQ? 三大好处,削峰,解耦,异步。 削峰 比如秒杀,或者高铁抢票,请求在某些时间点实在是太多了,服务器处理不过来,可以把请求放到 MQ 里面缓冲一下,把一秒内收到的…

Unity中Shader抓取屏幕并实现扭曲效果

文章目录 前言一、屏幕抓取,在上一篇文章已经写了二、实现抓取后的屏幕扭曲实现思路:1、屏幕扭曲要借助传入 UV 贴图进行扭曲2、传入贴图后在顶点着色器的输入参数处,传入一个 float2 uv : TEXCOORD,用于之后对扭曲贴图进行采样3、…

写一篇nginx配置指南

nginx.conf配置 找到Nginx的安装目录下的nginx.conf文件,该文件负责Nginx的基础功能配置。 配置文件概述 Nginx的主配置文件(conf/nginx.conf)按以下结构组织: 配置块功能描述全局块与Nginx运行相关的全局设置events块与网络连接有关的设置http块代理…

计算机网络(二):TCP篇

文章目录 1. TCP头部包含哪些内容?2. 为什么需要 TCP 协议? TCP 工作在哪一层?3. 什么是 TCP ?4. 什么是 TCP 连接?5. 如何唯一确定一个 TCP 连接呢?6. UDP头部大小是多少?包含哪些内容&#xf…

burp+IE 微信小程序抓包教程

文章目录 一、BURP里新增监听端口二、BURP导出证书三、导入证书四、IE代理设置五、小程序抓包实际测试 一、BURP里新增监听端口 找一个没用的端口,使用以下方式新增 二、BURP导出证书 选择刚才新增的监听端口,点击证书导入导出 将其存出来即可&…

安卓机型系统美化 Color.xml文件必备常识 自定义颜色资源

color.xml文件是Android工程中用来进行颜色资源管理的文件.可以在color.xml文件中通过<color>标签来定义颜色资源.我们在布局文件中、代码中、style定义中或者其他资源文件中&#xff0c;都可以引用之前在color.xml文件中定义的颜色资源。 将color.xml文件拷到res/value…

c++的库函数std::move() 与 完美转发函数 std:: forward 源码

以下是两个注释&#xff1a; &#xff08;2&#xff09;以下是一个实验&#xff1a;

在HTML里,attribute和property有什么区别?

在HTML中&#xff0c;attribute 和 property 之间的区别是一个常见但容易混淆的概念。它们都与HTML元素有关&#xff0c;但它们在功能、用途和行为上有所不同。以下是它们之间的主要区别&#xff1a; 定义和来源: Attribute: 它们是在HTML标记中定义的&#xff0c;通常用于提供…

esxi网卡直通后虚拟机无网

出现选网卡的时候无法选中&#xff0c;这里应该是一个bug。 解决方法如下&#xff1a; 1.先随便选择一个网卡 2.勾先取消再重新勾选 3.保存退出&#xff0c;重启虚拟机即可

浅谈一下前端字符编码

背景 众所周知&#xff0c;计算机只能识别二进制&#xff0c;它是由逻辑电路组成&#xff0c;逻辑电路通常只有两个状态&#xff0c;开关的接通与断开&#xff0c;这两种状态正好可以用二进制数的0和1表示。但是现实中存在着其他的字符&#xff1a;数字、字母、中文、特殊符号…

学习记忆——数学篇——顺口溜记忆法+谐音记忆法+其他

顺口溜记忆法 【训练】 一次绝对不等式的解集&#xff1a;不等式| x x x| &#xff1e; a ( a > 0 ) &#xff1e;a(a>0) &#xff1e;a(a>0)的解集是 X > a 或 X < − a X>a或X<-a X>a或X<−a&#xff0c;不等式| x x x| < a ( a > 0 ) <…

Java————数组

1 、数组 数组可以看成是相同类型元素的一个集合&#xff0c; 在内存中是一段连续的空间。 每个空间有自己的编号&#xff0c;其实位置的编号为0&#xff0c;即数组的下标。 数组是引用类型。 1. 数组的创建 T[] 数组名 new T[N];T&#xff1a;表示数组中存放元素的类型 …