Vue -- webpack 项目自动打包压缩成zip文件
程序员文章站
2022-06-30 11:53:50
执行npm run build,自动将打包后的项目压缩成zip文件,便于发送后端部署! ......
这段时间用 vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了。所以索性在执行 npm run build命令时就打包成zip文件。最终完成了这个集webpack打包、压缩成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为数组格式。
3、执行效果
配置完成后,重新执行 npm run build 命令。执行完成后,在dist文件夹内(上面配置的目的地目录为 dist文件夹),就可以看到压缩好的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-cli项目webpack打包后iconfont文件路径的问题
-
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
-
解决vue-cli项目webpack打包后iconfont文件路径的问题
-
解决vue 项目使用webpack打包后,直接打开dist文件夹下的index.html页面空白的问题
-
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
-
Vue -- webpack 项目自动打包压缩成zip文件
-
vue项目批量加载url文件并打包到zip下载
-
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
-
解决vue 项目使用webpack打包后,直接打开dist文件夹下的index.html页面空白的问题
-
Vue -- webpack 项目自动打包压缩成zip文件