Vue  webpack 项目自动打包压缩成zip文件的方法


Posted in Javascript onJuly 24, 2019

这段时间用 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为数组格式。

Vue  webpack 项目自动打包压缩成zip文件的方法

3、执行效果

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

Vue  webpack 项目自动打包压缩成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文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
Javascript之Math对象详解
Jun 07 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 #Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 #Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 #Javascript
详解Vue中的基本语法和常用指令
Jul 23 #Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 #Javascript
node.js express框架简介与实现
Jul 23 #Javascript
js微信分享接口调用详解
Jul 23 #Javascript
You might like
PHP禁止个别IP访问网站
2013/10/30 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
PHP7 弃用功能
2021/03/09 PHP
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
js操作二进制数据方法
2018/03/03 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
用Django写天气预报查询网站
2018/10/21 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
python变量的作用域是什么
2020/05/26 Python
社团活动策划书范文
2014/01/09 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android