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

晚东

已于 2023-05-05 16:43:24 修改

阅读量1k

点赞数

文章标签： webpack 前端 javascript

于 2023-05-05 16:40:41 首次发布

本文链接：https://blog.csdn.net/weixin_45239190/article/details/130509456

版权

该文章介绍了如何使用filemanager-webpack-plugin这个Webpack插件来在构建过程中执行文件和目录的操作，如安装、配置以及在构建后复制、移动、删除、创建目录和归档文件。通过示例代码展示了如何处理多个文件操作任务，包括按顺序执行和处理压缩文件。

摘要由CSDN通过智能技术生成

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
               }
             }
           }

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

想要按顺序运行操作，可以将onStart和onEnd事件设置为数组。

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" }
           ]
         }

会报错，说明目标目录已经存在！