Vue webpack 項(xiàng)目自動(dòng)打包壓縮成zip文件的方法

發(fā)布時(shí)間：2020-08-21 18:16:26 來源：腳本之家閱讀：468 作者：帝鴻琬琰欄目：web開發(fā)

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

1、插件裝備

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

　　安裝：

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

2、webpack配置

　?、?在項(xiàng)目根目錄 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ù)組格式。

Vue webpack 項(xiàng)目自動(dòng)打包壓縮成zip文件的方法

3、執(zhí)行效果

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

Vue webpack 項(xiàng)目自動(dòng)打包壓縮成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 項(xiàng)目自動(dòng)打包壓縮成zip文件的方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

向AI問一下細(xì)節(jié)

Vue webpack 項(xiàng)目自動(dòng)打包壓縮成zip文件的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽