编写webpack插件自动找到大文件并上传到指定服务器

编写一个Webpack插件来自动找出大文件并上传到指定服务器

1、创建一个Webpack插件。

2、在插件中监听webpack的特定钩子，比如emit。

3、在emit钩子中，你可以获取编译后的assets，并计算出哪些文件超过了你定义的大小阈值。

4、使用Node.js的http模块或第三方库（如request）发送POST请求上传文件。

以下是一个简单的Webpack插件示例代码：

const http = require('http'); // 或者使用 'https' 如果是https服务器
const fs = require('fs');
const path = require('path');
 
class UploadLargeFilesWebpackPlugin {
  constructor(options) {
    this.options = options;
  }
 
  apply(compiler) {
    compiler.hooks.emit.tapAsync('UploadLargeFilesWebpackPlugin', (compilation, callback) => {
      const largeFileSize = this.options.largeFileSize || (1024 * 1024); // 默认1MB
      const uploadUrl = this.options.uploadUrl;
 
      Object.keys(compilation.assets).forEach((filename) => {
        const asset = compilation.assets[filename];
        const fileSize = asset.size();
        if (fileSize > largeFileSize) {
          const filePath = path.resolve(compiler.options.output.path, filename);
          const fileData = fs.readFileSync(filePath);
 
          const uploadRequest = http.request(uploadUrl, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/octet-stream',
              'Content-Length': fileData.length
            }
          }, (response) => {
            response.on('data', (chunk) => {
              console.log(`BODY: ${chunk}`);
            });
            response.on('end', () => {
              console.log('Upload completed');
            });
          });
 
          uploadRequest.on('error', (e) => {
            console.error(`Problem with request: ${e.message}`);
          });
 
          uploadRequest.write(fileData);
          uploadRequest.end();
        }
      });
 
      callback();
    });
  }
}
 
module.exports = UploadLargeFilesWebpackPlugin;

使用插件时，在webpack配置文件中如下配置：

const UploadLargeFilesWebpackPlugin = require('./path/to/UploadLargeFilesWebpackPlugin');
 
module.exports = {
  // ... 其他webpack配置
  plugins: [
    new UploadLargeFilesWebpackPlugin({
      largeFileSize: 5242880, // 5MB
      uploadUrl: 'http://yourserver.com/upload'
    })
  ]
};

确保替换http://yourserver.com/upload为你的实际上传服务器地址，并且服务器能够处理POST请求并接收文件数据。

原文地址：https://blog.csdn.net/weixin_42254016/article/details/142470394

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！