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 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
简谈创建React Component的几种方式
Jun 15 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
提问的智慧(2)
2006/10/09 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
详解JavaScript的BUG和错误
2018/05/07 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
详细分析python3的reduce函数
2017/12/05 Python
python ansible服务及剧本编写
2017/12/29 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python中常见错误及解决方法
2020/06/21 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
客服部工作职责范本
2014/02/14 职场文书
网站美工岗位职责
2014/04/02 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
教师党员整改措施
2014/10/24 职场文书
个人先进材料范文
2014/12/30 职场文书
八达岭长城导游词
2015/01/30 职场文书
个人培训总结
2015/03/05 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
Nginx配置根据url参数重定向
2022/04/11 Servers