Vue webpack 項目自動打包壓縮成zip文件的方法

更新時間：2019年07月24日 08:59:42 作者：帝鴻琬琰

這篇文章主要介紹了Vue -- webpack 項目自動打包壓縮成zip文件的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

這段時間用 Vue2.0 開發(fā)項目，每次打包都會用到 npm run build 命令，但是每次部署時給后端發(fā)包都要手動zip壓縮，這樣一兩次還行，但遇到項目板塊測試和臨時加急功能測試的時候，一天可能就要打包好多次，這就很煩了。所以索性在執(zhí)行 npm run build 命令時就直接打包成zip文件，方便省事！

1、插件裝備

　　webpack插件：filemanager-webpack-plugin，該插件可執(zhí)行打包，復(fù)制，移動，刪除文件以及新文件夾在build之前及之后創(chuàng)建。

　　安裝：

npm install filemanager-webpack-plugin --save-dev
或
cnpm install filemanager-webpack-plugin --save-dev

2、webpack配置

　?、?在項目根目錄 build/webpack.base.config.js 中抬頭變量聲明區(qū)域添加

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

　?、?在根目錄 build/webpack.base.config.js 內(nèi)找到 module.exports。然后在plugins內(nèi)添加

new FileManagerPlugin({
 onEnd: {
  delete: [
   './dist/control-operate.zip',
  ],
  archive: [
   {source: './dist', destination: './dist/control-operate.zip'},
  ]
 }
})

　　注：若 plugins不存在，則新建plugins，plugins為數(shù)組格式。

3、執(zhí)行效果

　　配置完成后，重新執(zhí)行 npm run build 命令。執(zhí)行完成后，在dist文件夾內(nèi)（上面配置的目的地目錄為 dist文件夾），就可以看到壓縮好的zip文件包了。

4、其他功能

module.exports = {
 ......
 plugins: [
  new FileManagerPlugin({
   onEnd: {
    copy: [
     {source: '/path/from', destination: '/path/to'},
     {source: '/path/**/*.js', destination: '/path'},
     {source: '/path/fromfile.txt', destination: '/path/tofile.txt'},
     {source: '/path/**/*.{html,js}', destination: '/path/to'},
     {source: '/path/{file1,file2}.js', destination: '/path/to'},
     {source: '/path/file-[hash].js', destination: '/path/to'}
    ],
    move: [
     {source: '/path/from', destination: '/path/to'},
     {source: '/path/fromfile.txt', destination: '/path/tofile.txt'}
    ],
    delete: [
     '/path/to/file.txt',
     '/path/to/directory/'
    ],
    mkdir: [
     '/path/to/directory/',
     '/another/directory/'
    ],
    archive: [
     {source: '/path/from', destination: '/path/to.zip'},
     {source: '/path/**/*.js', destination: '/path/to.zip'},
     {source: '/path/fromfile.txt', destination: '/path/to.zip'},
     {source: '/path/fromfile.txt', destination: '/path/to.zip', format: 'tar'},
     {
      source: '/path/fromfile.txt',
      destination: '/path/to.tar.gz',
      format: 'tar',
      options: {
       gzip: true,
       gzipOptions: {
        level: 1
       }
      }
     }

    ]
   }
  })
 ],
 ......
}

總結(jié)

以上所述是小編給大家介紹的Vue webpack 項目自動打包壓縮成zip文件的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: