filemanager-webpack-plugin

此插件用于在打包前后，复制，移动，删除，压缩（zip/tar/tar.gz）文件和目录

不支持打包成7z

安装

npm install filemanager-webpack-plugin --save-dev

使用

// src/config/vueConfigs.js
const vueConfigs = {
    lintOnSave: true,
    devPort: 8088,
    webpackBarName: 'pics-pms',
    webpackBanner:
        ' build: pics-pms \n time: ',
    build7z: true,
    // 生产环境构建文件的目录名
    outputDir: 'dist'
};
module.exports = vueConfigs;

// vue.config.js

const FileManagerPlugin = require('filemanager-webpack-plugin');
const {  
title,  
lintOnSave,  
devPort,  
webpackBanner,  
webpackBarName,  
build7z,  
outputDir  
} = require('./src/config');
const dayjs = require('dayjs');  
const date = dayjs().format('YYYY_M_D'); // 注意不能使用time

chainWebpack: config => {
        if (build7z) {
            config.when(process.env.NODE_ENV === 'production', (config) => {
                config
                    .plugin('fileManager')
                    .use(FileManagerPlugin, [
                        {
                            events: {
                                onEnd: {
                                    archive: [
                                        {
                                            source: `./${outputDir}`,
                                            destination: `./${outputDir}/${title}_${outputDir}_${date}.zip`,
                                        },
                                    ],
                                },
                            },
                        }
                    ])
                    .end()
            })
        }
}

注意不能使用time,原因如下

使用 time 变量可能会导致无法暂停打包，这是因为 time 变量的值是一个精确到毫秒的时间戳字符串，每次打包生成的压缩文件名称都会不同，即使只修改了一点点代码也会改变，这导致 webpack 在打包时无法使用缓存，每次都要重新构建，从而导致无法暂停。

相比之下，使用 date 变量的值是一个精确到秒的时间字符串，并且在一秒内多次打包生成的压缩文件名称是相同的，这样就可以利用 webpack 的缓存机制来提高打包速度，从而可以暂停和继续打包。

因此，建议在使用插件进行文件管理时，尽量避免使用精确到毫秒的时间戳，可以使用精确到秒的时间信息，或者其他具有唯一性的标识符。这样可以减少不必要的重复构建，提高构建效率，并且可以更好地支持打包的暂停和继续。

示例2

const FileManagerPlugin = require('filemanager-webpack-plugin') // 引入
const packageName = 'dist'
chainWebpack(config) {
     config.plugin('fileManager')
      .use(FileManagerPlugin).tap(args => [{
        events: {
          onEnd: {
            delete: [ // 首先需要删除项目根目录下的dist.zip
              `./${packageName}.zip`
            ],
            archive: [ // 选择文件夹将之打包成xxx.zip并放在根目录
              { source: `./${packageName}`, destination: `./${packageName}.zip` }
            ]
          }
        }
     }])
}

示例3

const FileManagerPlugin = require('filemanager-webpack-plugin')
module.exports = {
     configureWebpack: {  
         plugins: [
             new FileManagerPlugin({  
                 onEnd: {
                     mkdir: ['./dist'], // 新加的一句代码
                     delete: [   
                         './dist.zip',
                     ],
                    archive: [ 
                         {source: './dist', destination: './dist.zip'},
                     ]
                 }
             })
         ]
     }
 };