关于使用filemanager-webpack-plugin插件时遇到的问题

在vue项目需求中需要在打包的同时生成.zip文件，这时候就需要用到filemanager-webpack-plugin这个插件了，下面是在使用时遇到的问题

问题一：

出现问题：

vue.config.js文件，将filemanager-webpack-plugin配置在piugins中打包时会报错，说onEnd是一个未知的属性

configureWebpack: {
  name: "test",
  resolve: {
    alias: {
      "@": resolve("src")
    }
  },
  plugins: [
    new fileanagerWebpackPlugin({
      onEnd: {
        delete: [   
          './dist.zip',
        ],
        archive: [{
          source: './dist', 
          destination: './dist.zip'
        }]
      }
    })
  ]
}

解决方案：

方法1：

 出现上面的问题是因为在onEnd外层还有一个events，在外层加上events之后报错可以得到解决

configureWebpack: {
  name: "test",
  resolve: {
    alias: {
      "@": resolve("src")
    }
  },
  plugins: [
    new fileanagerWebpackPlugin({
      events: {
        onEnd: {
          delete: [   
            './dist.zip',
          ],
          archive: [{
            source: './dist', 
            destination: './dist.zip'
          }]
        }
      }
    })
  ]
}

方法2：

在chanWebpack中也可以进行配置

chainWebpack(config){
  config.plugin("fileManager").use(fileanagerWebpackPlugin).tap(args => [{
    events: {
      onEnd: {
        delete: [   
          './dist.zip',
        ],
        archive: [{
          source: './dist', 
          destination: './dist.zip'
        }]
      }
    }
  }])
}

总之不管在哪里进行配置，都不要忘记外层有个 events ！！！

问题二：

在配置后启动项目，如果在没有打包的情况下项目会报错并且终止运行

报错：

Error: EPERM: operation not permitted, open '*盘\***\***\***\dist.zip'

解决方法

需要配置mkdir，如果根目录没有dist压缩包就会自动生成一个空的压缩包，自动生成压缩包后项目就可以成功跑起来了

configureWebpack: {
  name: "test",
  resolve: {
    alias: {
      "@": resolve("src")
    }
  },
  plugins: [
    new fileanagerWebpackPlugin({
      events: {
        onEnd: {
          mkdir: ['./dist'],
          delete: [   
            './dist.zip',
          ],
          archive: [{
            source: './dist', 
            destination: './dist.zip'
          }]
        }
      }
    })
  ]
}

chainWebpack(config){
  config.plugin("fileManager").use(fileanagerWebpackPlugin).tap(args => [{
    events: {
      onEnd: {
        mkdir: ['./dist'],
        delete: [   
          './dist.zip',
        ],
        archive: [{
          source: './dist', 
          destination: './dist.zip'
        }]
      }
    }
  }])
}