这段时间用 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文件的更多相关文章

  1. vue-webpack项目自动打包压缩成zip文件批处理

    为什么需要这个? 使用vue框架开发项目,npm run build这个命令会一直用到,如果需要给后端发包,那你还要打包成zip格式的压缩包,特别是项目提测的时候,一天可能要执行重复好几次,所以才有了 ...

  2. linux下压缩成zip文件解压zip文件

    linux  zip命令的基本用法是: zip [参数] [打包后的文件名] [打包的目录路径] linux  zip命令参数列表: -a     将文件转成ASCII模式 -F     尝试修复损坏 ...

  3. PPT文件流转为图片,并压缩成ZIP文件输出到指定目录

    实现流程: 接收InputStream流->复制流->InputStream流转为PPT->PPT转为图片->所有图片压缩到一个压缩文件下 注意: 1.PPT文件分为2003和 ...

  4. vue -- vue-cli webpack项目打包后自动压缩成zip文件

    用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...

  5. .net 生成html文件后压缩成zip文件并下载

    这里只做一个简单的实例 public ActionResult Index() { string path = Server.MapPath("/test/");//文件输出目录 ...

  6. QT发布的EXE打包压缩成单文件

    Enigma virtual box 是免费的软件虚拟化工具,它可以将多个文件封装到您的应用程序主文件,这样您的软件就可以制作成为单文件的绿色软件. enigma virtual box 支持所有类型 ...

  7. (转)windows环境vue+webpack项目搭建

    首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...

  8. java 实现Excel压缩成Zip导出

    1 概述 在web项目中常见的一种场景就是将文件导出为Excel,但是当需要导出多个Excel时,使用者将频繁操作,这样就严重降低了项目的友好交互性以及易用性,那么怎么才能优雅的解决这个问题呢?笔者今 ...

  9. Java实现将文件或者文件夹压缩成zip

            最近碰到个需要下载zip压缩包的需求,于是我在网上找了下别人写好的zip工具类.但找了好多篇博客,总是发现有bug.因此就自己来写了个工具类.         这个工具类的功能为: ( ...

随机推荐

  1. 解决 ORA-27102: out of memory

    记一次故障处理总结: 操作系统:windows server 2008 R2数据库版本:11.2.0.2 故障描述:外部应用连接数据库,提示连接不正常: 排错过程:1.首先 检查数据库监听服务状态是否 ...

  2. C++ 操作符、局部 全局变量及自动转换原则

    1.&:表示与操作,eg:2&1=2&&:表示and操作,eg:1&&0=0|:表示或操作,eg:2|1=3||:表示or操作,eg:1||0=12.全 ...

  3. ThreadPoolExecutor 中的 shutdown() 、 shutdownNow() 、 awaitTermination() 的用法和区别

    Java并发编程中在使用到ThreadPoolExecutor时,对它的三个关闭方法(shutdown().shutdownNow().awaitTermination())的异同点如下: shutd ...

  4. 只用一招,让你Maven依赖下载速度快如闪电

    一.背景 众所周知,Maven对于依赖的管理让我们程序员感觉爽的不要不要的,但是由于这货是国外出的,所以在我们从中央仓库下载依赖的时候,速度如蜗牛一般,让人不能忍,并且这也是大多数程序员都会遇到的问题 ...

  5. 在自己网站中引入CU3ER/Flash 3D幻灯片效果和照片画框

    要求 必备知识 本文要求基本了解 JAVASCRIPT 和 XML基础语法知识. 运行环境 支持Flash Player的浏览器/Flash Player11及以上 演示地址 演示地址 下载地址   ...

  6. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(八):MyBatis分页功能实现

    使用Mybatis时,最头痛的就是写分页,需要先写一个查询count的select语句,然后再写一个真正分页查询的语句,当查询条件多了之后,会发现真不想花双倍的时间写 count 和 select,幸 ...

  7. springboot 多模块 -- 将web拆分出去 - 流动计算架构

    前言: 之前将各层都拆分出去, 作为一个独立的可替换的子模块. 感觉比以前确实是灵活了一些. 不管是电商项目, 还是现在公司做的项目, 其中, 有很多的业务逻辑, 都是一样的, 但是由于不在一个系统中 ...

  8. 两台Mysql数据库数据同步实现

    两台Mysql数据库数据同步实现 做开发的时候要做Mysql的数据库同步,两台安装一样的系统,都是FreeBSD5.4,安装了Apache 2.0.55和PHP 4.4.0,Mysql的版本是4.1. ...

  9. Python中模块的发布与安装

    模块(Module) Python中有一个概念叫做模块(module),这个和C语言中的头文件以及Java中的包很类似,比如在Python中要调用sqrt函数,必须用import关键字引入math这个 ...

  10. Python模块:time模块详解(转)

    在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime以及calendar.这篇文章,主要讲解time模块. 在开始之前,首先要说明这几点: ...