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解密入门之凭直觉解
Jun 25 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 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的一个登录的类 [推荐]
2007/03/16 PHP
php横向重复区域显示二法
2008/09/25 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
python求列表交集的方法汇总
2014/11/10 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
党的群众教育实践活动实施方案
2014/06/12 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis