About the problems encountered when using the filemanager-webpack-plugin plugin

In the vue project requirements, it is necessary to generate a .zip file while packaging. At this time, the plug-in filemanager-webpack-plugin needs to be used. The following are the problems encountered during use

Question one:

problem appear:

In the vue.config.js file, when configuring filemanager-webpack-plugin in piugins, an error will be reported, saying that onEnd is an unknown attribute

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

solution:

method 1:

 The above problem occurs because there is an event in the outer layer of onEnd, and the error can be solved after adding events to the outer layer

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

Method 2:

Configuration is also possible in chanWebpack

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

In short, no matter where you configure it, don't forget that there is an event in the outer layer! ! !

Question two:

Start the project after configuration, if the project is not packaged, it will report an error and terminate the operation

Error:

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

Solution

You need to configure mkdir. If there is no dist compressed package in the root directory, an empty compressed package will be automatically generated. After the compressed package is automatically generated, the project can run successfully.

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'
        }]
      }
    }
  }])
}