Vue - Vue CLI(3): Webpack項目自動打包壓縮成 zip 文件


  這段時間用 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為數組格式。

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
                            }
                        }
                    }

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM