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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
Javascript window对象详解
Nov 12 Javascript
jquery不常用方法汇总
Jul 26 Javascript
Validform表单验证总结篇
Oct 31 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
JS的深浅复制详细
Oct 16 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
给php新手谈谈我的学习心得
2007/02/25 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
django foreignkey(外键)的实现
2019/07/29 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
Python hashlib模块的使用示例
2020/10/09 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
EJB面试题
2015/07/28 面试题
如何撰写一封出色的求职信
2014/04/27 职场文书
超市工作总结范文2014
2014/12/19 职场文书
运动会开幕式致辞
2015/07/29 职场文书
2015年度女工工作总结
2015/10/22 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
初中数学教学反思范文
2016/02/17 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers