目標：將前端項目的本地圖片資源上傳到服務器，并將靜態(tài)文件的引用路徑改為服務器的路徑惊奇，不在讀取本地文件路徑寸莫。并刪除本地圖片資源。

總共分三步

1膝蜈、第一步：首先把文件上傳到靜態(tài)服務器上锅移，我們這里使用 node-ssh 創(chuàng)建sftp鏈接將文件上傳

關鍵代碼如下

ftpplugin.js 這是一個自定義的plugin

const fs = require('fs')
const fsPromises = require('fs').promises;
const {NodeSSH} = require('node-ssh')
const ssh = new NodeSSH()
const path = require('path');

class FtpPlugin {
  apply(compiler) {
    compiler.hooks.afterEmit.tapAsync('done', (compilation, callback) => {
      // 讀取文件
      fs.readdir('dist', (err, files) => {
        if (err) {
          console.error(err);
        } else {

          files.map((itemDirName) => {
            console.log('itemDirName is', distPath + '/' + itemDirName)
            const currentDirPath = distPath + '/' + itemDirName

            if(fs.statSync(currentDirPath).isDirectory() && fs.existsSync(currentDirPath)){
                // 調用上傳圖片的函數(shù)
              uploadImg(itemDirName)
            }
          })
        }
      });

      callback();
    });
  }
}

/**
* 刪除文件
*/
const deleteFile = (delPath, direct) => {
  delPath = direct ? delPath : path.join(__dirname, delPath)
  try {
    // 判斷文件或文件夾是否存在
    if (fs.existsSync(delPath)) {
      fs.unlinkSync(delPath);
    } else {
      console.log('路徑不存在', delPath);
    }
  } catch (error) {
    console.log('刪除失敗', error);
  }
}

/**
* 刪除文件夾
*/
const deleteFolder = (delPath) => {
  delPath = path.join(__dirname, delPath)

  try {
    if (fs.existsSync(delPath)) {
      const delFileFunction = (currentPath) => {
        const files = fs.readdirSync(currentPath)
        for (let i = 0; i < files.length; i++) {
          const dirPath = path.join(currentPath, files[i])
          if (fs.statSync(dirPath).isDirectory()) {
            delFn(dirPath)
          } else {
            deleteFile(dirPath, true)
          }
        }
        // 只能刪空文件夾
        fs.rmdirSync(address);
      }
      delFileFunction(delPath);
    } else {
      console.log('文件夾不存在', delPath);
    }
  } catch (error) {
    console.log('刪除失敗', error);
  }
}

const ftpConfig = {
  host: '', port: '', username: '', password: ''
};

const uploadImg = (itemDirName) => {
  return new Promise((resolve, reject) => { 
    // 創(chuàng)建一個鏈接
     ssh.connect(ftpConfig).then(() => {

      ssh.putDirectory(`local path`, `your server path`, {
        recursive: true,
        concurrency: 10,
      }).then(function(status) {
        console.log('the directory transfer was', status ? 'success' : '')
        // 調用刪除文件夾函數(shù)
        deleteFolder(`local path`)
        ssh.dispose()
      })

    }).catch(err => {
      reject(err)
      console.log('ssh err', err)
      ssh.dispose()
    })
  })
}

2熔掺、第二步：使用這個Plugin

// webpack config
const ftpPlugin = require('./ftpPlugin');
congif: {
    // ...
    plugins: [

        new ftpPlugin()
    ]   
    // ...
}

3饱搏、第三步：將loader處理后的資源路徑加上前綴

這一步很關鍵，取決于你的項目中的靜態(tài)資源使用的是本地資源還是服務器資源

// loader
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          exclude: [/node_modules/],
          options: {
            limit: 3 * 1024,
            name: `img/[name].[contentHash].[ext]`
            publicPath:  '靜態(tài)服務器的域名'
          }
        },