Sobre os problemas encontrados ao usar o plug-in filemanager-webpack-plugin

Nos requisitos do projeto vue, é necessário gerar um arquivo .zip durante o empacotamento. Neste momento, o plug-in filemanager-webpack-plugin precisa ser usado. A seguir estão os problemas encontrados durante o uso

Pergunta um:

problema aparece:

No arquivo vue.config.js, ao configurar filemanager-webpack-plugin em piugins, será reportado um erro, dizendo que onEnd é um atributo desconhecido

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

solução:

Método 1:

 O problema acima ocorre porque há um evento na camada externa de onEnd e o erro pode ser resolvido após adicionar eventos à camada externa

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

Método 2:

A configuração também é possível no chanWebpack

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

Resumindo, não importa onde você configure, não se esqueça que existe um evento na camada externa! ! !

Pergunta dois:

Inicie o projeto após a configuração, se o projeto não estiver empacotado, ele relatará um erro e encerrará a operação

Erro:

Erro: EPERM: operação não permitida, abra '*盘\***\***\***\dist.zip'

Solução

Você precisa configurar o mkdir. Se não houver nenhum pacote compactado dist no diretório raiz, um pacote compactado vazio será gerado automaticamente. Depois que o pacote compactado for gerado automaticamente, o projeto poderá ser executado com sucesso.

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