npm run buid 自动打包 zip

香菊网 发表于: 2020-10-20 分类: H5部分  js部分  前端front  

引言:

   目的是在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` },
        ],
      ]
    })
  ],
  ...
}

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

标签: H5部分js部分前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮