当前位置: 移动技术网 > IT编程>网页制作>Html5 > Vue -- webpack 项目自动打包压缩成zip文件

Vue -- webpack 项目自动打包压缩成zip文件

2018年12月25日  | 移动技术网IT编程  | 我要评论

东莱太史慈txt,小儿咳嗽食疗,南山网

  这段时间用 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
                            }
                        }
                    }

                ]
            }
        })
    ],
    ......
}

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网