filemanager-webpack-plugin 对构建前后文件进行操作

目录

1. 安装

2. 使用

3. 合并文件或目录 


这个 Webpack 插件允许您在构建前或构建后复制、归档(.zip/.tar/.tar.gz)、移动、删除文件和目录。

1. 安装

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

2. 使用

webpack.config.js  基本使用

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

module.exports = {
  // ...
  // ...
  plugins: [
    new FileManagerPlugin({
      events: {    // 不加会报错!!!
        onEnd: {
        copy: [
          { source: '/path/from', destination: '/path/to' }
        ],
        move: [
          { source: '/path/from', destination: '/path/to' }
        ],
        delete: [
         '/path/to/file.txt'
        ],
        mkdir: [
         '/another/directory/'
        ],
        archive: [
          { source: '/path/from', destination: '/path/to.zip' },
          { 
             source: '/path/fromfile.txt', 
             destination: '/path/to.tar.gz', 
             format: 'tar',
             options: {
               gzip: true,
               gzipOptions: {
                level: 1
               },
               globOptions: {
                nomount: true
               }
             }
           }

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

想要按顺序运行操作,可以将onStartonEnd事件设置为数组。

3. 合并文件或目录 

 以下是 打包后的文件中,将两个文件合并为一个文件后压缩

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

module.exports = {
  // ...
  // ...
  plugins: [
    new FileManagerPlugin({
      events: {
       onEnd: [  // 将onEnd设置为数组
         {
           copy: [
             { source: "./dist/assets", destination: "./newDist" }
           ]
         },
         {
           copy: [
             { source: "./dist/lease-item", destination: "./newDist" }
           ]
         },
         {
           delete: [
             "./dist"
           ]
         },
         {
           archive: [
              {
                source: "./newDist",
                destination: "./newDist" + moment().format("MMDDHHmm") + ".zip"
              }
            ]
         }
       ]
     }
    })
  ],
  ...
}

在以上例子中,两个copy是在两个对象中的,如果在一个对象中:

         {
           copy: [
             { source: "./dist/assets", destination: "./newDist" },
             { source: "./dist/lease-item", destination: "./newDist" }
           ]
         }
         

会报错,说明目标目录已经存在!

你可能感兴趣的:(webpack,前端,javascript)