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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
分析JS中this引发的bug
Dec 12 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
PHP反向代理类代码
2014/08/15 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
javascript函数库-集合框架
2007/04/27 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
python创建线程示例
2014/05/06 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Python requests库用法实例详解
2018/08/14 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
太太口服液广告词
2014/03/20 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
退学证明范本3篇
2014/10/29 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书