webpack打包之 copy-webpack-plugin

news/2024/5/16 13:06:04/文章来源:https://blog.csdn.net/qq_40922656/article/details/131789992

copy-webpack-plugin 打包复制文件插件。
1、什么时候要使用?
在离线应用中,前端所有文件都需在在本地,有些文件(比如iconFont以及一些静态img)需要转为离线文件,这些文件可以直接引用更方便些,这就需要在打包时直接复制到打包文件下。
2、安装依赖

npm i copy-webpack-plugin --save-dev

3、配置webpack

const compressionPlugin = require('compression-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require("path");
module.exports = {devServer: {//开发环境的跨域问题解决,后端服务ip 和 端口proxy: {'/eom': {target: 'http://127.0.0.1:7000',changeOrigin: true},'/pangu': {target: 'http://127.0.0.1:7000',changeOrigin: true},/**调用字典配置 */'pangu/eom/asset': {target: 'http://127.0.0.1:9003',changeOrigin: true,pathRewrite: {'^/pangu/eom/asset': '/eom/asset'}}}},pages: {index: {// page 的入口entry: 'src/TdPluginEomServiceMain.js',// 模板来源template: 'public/index.html',// 输出文件名filename: 'index.html'}},publicPath: './',assetsDir: './eom',lintOnSave: false,productionSourceMap: false, //打包加密filenameHashing: process.env.NODE_ENV === 'production' ? false : true,configureWebpack: () => {if (process.env.NODE_ENV === 'production') {return {plugins: [new compressionPlugin({test: /\.js$|\.html$|\.css/,threshold: 10240,deleteOriginalAssets: false}),new CopyWebpackPlugin([{from: path.resolve(__dirname, './src/static'),  //文件资源路径to: path.resolve(__dirname, './dist/eom/assets'),//复制文件要到的目的路径ignore: ['.*']}]) //打包静态资源],output: {jsonpFunction: 'TdPluginEomServiceMain'}};}}
};

4、打包
在这里插入图片描述

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

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

相关文章

Redis学习(三)持久化机制、分布式缓存、多级缓存、Redis实战经验

文章目录 分布式缓存Redis持久化RDB持久化AOF持久化 Redis主从Redis数据同步原理全量同步增量同步 Redis哨兵哨兵的作用和原理sentinel(哨兵)的三个作用是什么?sentinel如何判断一个Redis实例是否健康?master出现故障后&#xff0…

QT之智能指针

如果没有智能指针,程序员必须保证new对象能在正确的时机delete,四处编写异常捕获代码以释放资源,而智能指针则可以在退出作用域时(不管是正常流程离开或是因异常离开)总调用delete来析构在堆上动态分配的对象。 来看看一个野指针例子 程序将会…

vue的生命周期和执行顺序

1,Vue 生命周期都有哪些? 序号生命周期描述1beforecreate创建前vue实例初始化阶段,不可以访问data,methods; 此时打印出的this是undefined;2created创建后vue实例初始化完成,可以访问data,meth…

truffle 进行智能合约测试

0字 本方法使用了可视化软件Ganache 前两步与不使用可视化工具的步骤是一样的(有道云笔记),到第三步的时候需要注意: 在truffle插件下找到networks目录,提前打开Ganache软件 在Ganache中选择连接或者新建&#xff0…

Django实现接口自动化平台(十二)自定义函数模块DebugTalks 序列化器及视图【持续更新中】

上一章: Django实现接口自动化平台(十一)项目模块Projects序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 本章是项目的一个分解,查看本章内容时,要结合整体项目代码来看: python django vue…

Redis : zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录

In file included from adlist.c:34:0: zmalloc.h:50:31: 致命错误&#xff1a;jemalloc/jemalloc.h&#xff1a;没有那个文件或目录 #include <jemalloc/jemalloc.h> 解决 : 如上图使用命令 make MALLOClibc

视频卡通化技术路线

神经风格迁移&#xff1a;用深度神经网络生成风格化图像&#xff0c;通过捕获到的图像中的内容表征对输出图像做约束&#xff0c;就是输入图像和目标图像通过vgg提取的特征做约束。 GAN图像翻译&#xff1a;Image-to-image translation&#xff0c;主要基于conditional GAN&am…

Redis分布式锁的演变历程

什么时候用分布式锁 当并发去读写一个【共享资源】的时候&#xff0c;我们为了保证数据的正确&#xff0c;需要控制同一时刻只有一个线程访问。 分布式锁就是用来控制同一时刻&#xff0c;只有一个 JVM 进程中的一个线程可以访问被保护的资源。 分布式锁入门 分布式锁应该满足…

【C++修炼之路】list 模拟实现

&#x1f451;作者主页&#xff1a;安 度 因 &#x1f3e0;学习社区&#xff1a;StackFrame &#x1f4d6;专栏链接&#xff1a;C修炼之路 文章目录 一、读源码二、成员三、默认成员函数1、构造2、析构3、拷贝构造4、赋值重载 四、迭代器五、其他接口 如果无聊的话&#xff0c;…

RocketMQ环境搭建

环境搭建 环境准备 下载地址: https://downloads.apache.org/rocketmq/4.9.5/安装 上传至服务器 mkdir /usr/soft #上传至此目录/usr/softmkdir /usr/soft 解压 cd /usr/soft unzip rocketmq-all-4.9.5-bin-release.zip移动 mkdir /usr/local/rocketmq cd /usr/soft mv r…

Kubernetes - kubeadm部署

Kubernetes - kubeadm部署 1 环境准备1.1 在各个节点上配置主机名&#xff0c;并配置 Hosts 文件1.2 关闭防护墙&#xff0c;禁用selinux&#xff0c;关闭swap1.3 配置免密登录1.4 配置内核参数1.5 配置br_netfilter 2. 安装K8s2.1 安装docker(各节点)2.2 安装K8s组件(各节点)2…

安达发|如何选择更适合我们的APS高级排程软件

如何选择aps高级排程公司更适合我们?在选购aps高级排程的时候&#xff0c;一些朋友由于不清楚其中的选购技巧&#xff0c;许多时候会掉入些许选择误区&#xff0c;导致我们买不了合适我们选择的aps高级排程。因此选择适合我们的aps高级排程就变得十分重要&#xff0c;唯有明白…

使用typora+PicGo+Gitee简单实现图片上传功能

本文通过配置PicGoGitee来实现typora图片上传功能&#xff0c;系统是window 注意下载的清单有&#xff1a;PicGo&#xff0c;node.js&#xff0c;配置有&#xff1a;PicGo&#xff0c;node.js&#xff0c;gitee&#xff0c;typora 看着复杂实际上并不难&#xff0c;只是繁琐&am…

Django项目开发快速入门

Django项目开发快速入门 生成Django项目编写module后台管理系统admin自定义管理页面视图函数使用Django模板 生成Django项目 现在cmd中使用命令安装Django框架 pip install django3.2使用命令生成项目 django-admin startproject DjStore使用命令生成应用 python .\manage.…

学生成绩管理系统|Python小应用练习

题目要求 实现学生成绩管理系统 输入学生成绩信息序列&#xff0c;获得成绩从高到低、从低到高、按某一门成绩的排列,相同成绩都按先录入排列在前的规则处理。 数据如下&#xff1a;(数据规则&#xff1a;学生姓名 高数成绩 英语成绩 大物成绩) SanZhang 70 80 61 SiLi 86 77 …

CS 144 Lab Zero -- 可靠的内存字节流

CS 144 Lab Zero -- 可靠的内存字节流 环境搭建使用socket写一个网络程序In-memory reliable byte stream 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab 0 对应的PDF: Lab Checkpoint 0: networking warmup Lab 0 会省去Telnet部分内容。 环境搭建 Run Ubuntu ver…

golang 日志库logrus实践

logrus完全兼容标准的log库&#xff0c;还支持文本、JSON 两种日志输出格式。很多知名的开源项目都使用了这个库&#xff0c;如大名鼎鼎的 docker。 快速使用 第三方库需要先安装&#xff1a; $ go get github.com/sirupsen/logrus 后使用&#xff1a; package mainimport (&qu…

go语言终端交叉编译的事项windows编译其它平台软件包

交叉编译的终极版本[以此为准]&#xff1a; windows编译窗口目前分为cmd窗口&#xff0c;powershell窗口&#xff0c;这两个里面运行的命令不一样。 1.cmd窗口编译&#xff1b; 在windows10之前的系统版本上使用cmd命令行可以使用命令 CMD命令行中 在CMD命令行中编译&#…

HarmonyOS/OpenHarmony应用开发-程序包多HAP机制(下)

三、多HAP的开发调试与发布部署流程 &#xff08;一&#xff09;多HAP的开发调试与发布部署流程如下图所示。 图1 多HAP的开发调试与发布部署流程 &#xff08;二&#xff09;开发 开发者通过DevEco Studio工具按照业务的需要创建多个Module&#xff0c;在相应的Module中完成…

抖音seo源码搭建,抖音矩阵系统源码分发,抖音矩阵账号管理

前言&#xff1a; 抖音seo源码&#xff0c;抖音矩阵系统源码搭建&#xff0c;抖音矩阵同步分发。抖音seo源码部署是需要对接到这些正规接口再来做开发的&#xff0c;目前账号矩阵程序开发的功能&#xff0c;围绕一键管理多个账号&#xff0c;做到定时投放&#xff0c;关键词自动…