Vue -- webpack 项目自动打包压缩成zip文件
这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了。所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事!
1、插件装备
webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建。
安装:
npm install filemanager-webpack-plugin --save-dev 或 cnpm install filemanager-webpack-plugin --save-dev
2、webpack配置
① 在项目 根目录 build/webpack.base.config.js 中 抬头变量声明区域添加
const FileManagerPlugin = require('filemanager-webpack-plugin')
② 在根目录 build/webpack.base.config.js 内找到 module.exports。 然后在plugins内添加
new FileManagerPlugin({
onEnd: {
delete: [
'./dist/control-operate.zip',
],
archive: [
{source: './dist', destination: './dist/control-operate.zip'},
]
}
})
注:若 plugins不存在,则新建plugins,plugins为数组格式。

3、执行效果
配置完成后,重新执行 npm run build 命令。执行完成后,在dist文件夹内(上面配置的目的地目录为 dist文件夹),就可以看到压缩好的zip文件包了。

4、其他功能
module.exports = {
......
plugins: [
new FileManagerPlugin({
onEnd: {
copy: [
{source: '/path/from', destination: '/path/to'},
{source: '/path/**/*.js', destination: '/path'},
{source: '/path/fromfile.txt', destination: '/path/tofile.txt'},
{source: '/path/**/*.{html,js}', destination: '/path/to'},
{source: '/path/{file1,file2}.js', destination: '/path/to'},
{source: '/path/file-[hash].js', destination: '/path/to'}
],
move: [
{source: '/path/from', destination: '/path/to'},
{source: '/path/fromfile.txt', destination: '/path/tofile.txt'}
],
delete: [
'/path/to/file.txt',
'/path/to/directory/'
],
mkdir: [
'/path/to/directory/',
'/another/directory/'
],
archive: [
{source: '/path/from', destination: '/path/to.zip'},
{source: '/path/**/*.js', destination: '/path/to.zip'},
{source: '/path/fromfile.txt', destination: '/path/to.zip'},
{source: '/path/fromfile.txt', destination: '/path/to.zip', format: 'tar'},
{
source: '/path/fromfile.txt',
destination: '/path/to.tar.gz',
format: 'tar',
options: {
gzip: true,
gzipOptions: {
level: 1
}
}
}
]
}
})
],
......
}
Vue -- webpack 项目自动打包压缩成zip文件的更多相关文章
- vue-webpack项目自动打包压缩成zip文件批处理
为什么需要这个? 使用vue框架开发项目,npm run build这个命令会一直用到,如果需要给后端发包,那你还要打包成zip格式的压缩包,特别是项目提测的时候,一天可能要执行重复好几次,所以才有了 ...
- linux下压缩成zip文件解压zip文件
linux zip命令的基本用法是: zip [参数] [打包后的文件名] [打包的目录路径] linux zip命令参数列表: -a 将文件转成ASCII模式 -F 尝试修复损坏 ...
- PPT文件流转为图片,并压缩成ZIP文件输出到指定目录
实现流程: 接收InputStream流->复制流->InputStream流转为PPT->PPT转为图片->所有图片压缩到一个压缩文件下 注意: 1.PPT文件分为2003和 ...
- vue -- vue-cli webpack项目打包后自动压缩成zip文件
用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...
- .net 生成html文件后压缩成zip文件并下载
这里只做一个简单的实例 public ActionResult Index() { string path = Server.MapPath("/test/");//文件输出目录 ...
- QT发布的EXE打包压缩成单文件
Enigma virtual box 是免费的软件虚拟化工具,它可以将多个文件封装到您的应用程序主文件,这样您的软件就可以制作成为单文件的绿色软件. enigma virtual box 支持所有类型 ...
- (转)windows环境vue+webpack项目搭建
首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...
- java 实现Excel压缩成Zip导出
1 概述 在web项目中常见的一种场景就是将文件导出为Excel,但是当需要导出多个Excel时,使用者将频繁操作,这样就严重降低了项目的友好交互性以及易用性,那么怎么才能优雅的解决这个问题呢?笔者今 ...
- Java实现将文件或者文件夹压缩成zip
最近碰到个需要下载zip压缩包的需求,于是我在网上找了下别人写好的zip工具类.但找了好多篇博客,总是发现有bug.因此就自己来写了个工具类. 这个工具类的功能为: ( ...
随机推荐
- 使用.NetCore在Linux上写TCP listen 重启后无法绑定地址
拥抱.net core的过程中, 将公司的一套java项目改成了.net core 2.0版的. 里面的tcp服务被我用msdn的SocketAsyncEventArgs方式重写了, 然而在测试的过程 ...
- JDK中ThreadDump诊断Java代码中的线程死锁问题
多线程的死锁..死锁不是死了而是线程互相等待... 在项目中可能就是在几十万行的代码中存在一个死锁的问题,如何发现这个问题并且解决这个问题. JavaJDK为我们提供了一个诊断工具叫做ThreadDu ...
- Python爬虫实战四之抓取淘宝MM照片
原文:Python爬虫实战四之抓取淘宝MM照片其实还有好多,大家可以看 Python爬虫学习系列教程 福利啊福利,本次为大家带来的项目是抓取淘宝MM照片并保存起来,大家有没有很激动呢? 本篇目标 1. ...
- [Python 从入门到放弃] 6. 文件与异常(二)
本章所用test.txt文件可以在( [Python 从入门到放弃] 6. 文件与异常(一))找到并自行创建 现在有个需求,对test.txt中的文本内容进行修改: (1)将期间的‘:’改为‘ sai ...
- postgresql主从配置
master:10.0.1.114 slaver:10.0.1.116 一.yum安装https://blog.csdn.net/weixin_41048363/article/details/803 ...
- 你真的理解编码吗?unicode,utf8,utf16详解
背景 前两天在网上看到一篇关于编码的讨论,仔细学习了一下unicode,utf8,utf16的定义.这篇博客旨在让读者真正理解他们是什么. 什么是编码 在阅读本文之前建议读者先去阅读这篇文章:http ...
- 《Netty权威指南》(三)Netty 入门应用
Netty 服务端 Netty 客户端
- 【IT笔试面试题整理】字符串的排列
[试题描述]输入一个字符串,打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab,cba. 分析:这是一道很好的考查对 ...
- 基于vue实现一个简单的MVVM框架(源码分析)
不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...
- 在MVC应用程序中,怎样删除上传的文件
在ASP.NET MVC应用程序中,怎样删除上传的文件. 由于上传时,真正文件是存储在应用程序某一目录,在数据库表中,只是存储其基本信息.在删除时,需要注意一下,由于没有事务可操作.Insus.NET ...