XiangJv

引言：

   目的是在npm run build 之后 项目可以将dist的文件自动打包成zip的文件并存放在我们的项目位置中。里面有onEnd可以监听我们build完成的钩子，然后可以使用复制、移动、新增、删除 文件操作。

插件

    npm i filemanager-webpack-plugin

   # 钩子onStart、onEnd， onEnd中有copy、move、delete、mkdir。

 

在 vue.config.js 中引用配置插件

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

module.exports = {
  ...
  plugins: [
    new FileManagerPlugin({
      // build 结束
      onEnd: {
        // copy file
        copy: [
          { source: '/path/from', destination: '/path/to' },
          { source: '/path/**/*.js', destination: '/path' },
        ],
        // move file
        move: [
          { source: '/path/from', destination: '/path/to' },
        ],
        // delete file
        delete: [
         '/path/to/file.txt',
        ],
        // mkdir file
        mkdir: [
         '/path/to/directory/',
        ],
        // archive file
        archive: [
          { source: '/path/from', destination: '/path/to.zip' },
          { source: '/path/**/*.js', destination: '/path/to.zip' },
          ...
        ]
      }
    })
  ],
  ...
}

 

我们如果只是想在build的时候打包压缩dist文件夹下所有的文件成为dis.zip,我们可以这样配置

module.exports = {
  ...
  plugins: [
    new FileManagerPlugin({
      onEnd: [
        delete: [ // 删除
            './dist.zip',
        ],
        archive: [ // 压缩
          { source: './dist', destination: './dist/dist.zip' },
          // { source: './dist', destination: `./dist/dist_${pkgJSON.version}.zip` },
        ],
      ]
    })
  ],
  ...
}

来满足我们项目的操作，省去了手动打包的烦恼。当然 如果你需要的话也可以自定义打包的版本号和名字。也是非常方便的。