使用webpack，打包生成zip包

最新推荐文章于 2025-01-13 09:34:26 发布

weixin_47164846

最新推荐文章于 2025-01-13 09:34:26 发布

阅读量992

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/weixin_47164846/article/details/123093169

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用Webpack插件filemanager-webpack-plugin来管理打包后的文件，包括删除旧的zips文件夹，创建新的zip文件夹，复制特定目录到zip文件夹，然后将文件夹压缩为zip包，并最后删除临时文件夹。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1:如何使用webpack生成zip包

webpack插件filemanager-webpack-plugin(管理打包后的文件路径)


    const FileManagerPlugin = require('filemanager-webpack-plugin'); // webpack zip

    const srcFolder = path.resolve(__dirname, '../dist');
    const zipFileName = utils.genName();  //zip的名字，一般使用活动名称+当前的时间
    const zipFolderPath = path.resolve(__dirname, '../dist/zips/' + zipFileName);
    const zipPkgPath = path.resolve(__dirname, '../dist/zips/' + zipFileName + '.zip');

    webpackConfig.plugins.push(
        new FileManagerPlugin({
            onEnd: [
                {
                    delete: [path.resolve(__dirname, '../dist/zips/*')]
                },
                {
                    mkdir: [zipFolderPath]
                },
                {
                    copy: [
                        { source: srcFolder + '/htmls/*', destination: zipFolderPath + '/' + zipFileName + '/htmls' },
                        { source: srcFolder + '/images/*', destination: zipFolderPath + '/' + zipFileName + '/images' },
                        { source: srcFolder + '/static/*', destination: zipFolderPath + '/' + zipFileName + '/static' },
                        {
                            source: srcFolder + '/scripts/*.js',
                            destination: zipFolderPath + '/' + zipFileName + '/scripts'
                        },
                        {
                            source: srcFolder + '/styles/*.css',
                            destination: zipFolderPath + '/' + zipFileName + '/styles'
                        }
                    ]
                },
                {
                    archive: [
                        {
                            source: zipFolderPath,
                            destination: zipPkgPath
                        }
                    ]
                },
                {
                    delete: [zipFolderPath]
                }
            ]
        })
    );