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 相关文章推荐
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
vuex 的简单使用
Mar 22 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JS获取动态添加元素的方法详解
Jul 31 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python实现决策树分类算法
2017/12/21 Python
python实现图片上添加图片
2019/11/26 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python安装whl文件过程图解
2020/02/18 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
学习Python爬虫的几点建议
2020/08/05 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
户外亲子活动策划方案
2014/02/07 职场文书
2014年稽查工作总结
2014/12/20 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
工作态度怎么写
2015/06/25 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书