＜Webpack插件＞如何将Webpack打包成功的文件夹拷贝到指定地方？

最新推荐文章于 2024-08-25 07:29:21 发布

原创最新推荐文章于 2024-08-25 07:29:21 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何使用Webpack的CopyWebpackPlugin插件将打包后的文件夹复制到特定位置。通过新建CopyWebpackPlugin.js配置插件，并在webpack.config.js中引入，可以实现文件的自动拷贝。

新建一个 CopyWebpackPlugin.js 文件，代码如下：

const fs = require('fs')
const path = require('path')

/**
 * webpack 脚本
 * @description webpack 打包完成并且生成资源到 output 目录之后，会将生成的资源复制到 springboot 项目中
 */
module.exports = class CopyWebpackPlugin {
  /**
   * 
   * @param { String } options.dirFiles 目录，复制该目录下所有文件(非文件夹)
   * @param { String } options.dir 目录，复制该目录下所有文件夹下的所有文件
   * @param { String } options.dirTo 复制到该目录
   * @param { String } options.dirFilesTo 复制到该目录
   */
  constructor(options) {
    this.options = options
  }

  // webpack 规定每个插件的实例，必须有一个 .apply() 方法，webpack 打包前会调用所有插件的方法，插件可以在该方法中进行钩子的注册。
  apply(compiler) {
    compiler.hooks.afterEmit.tapAsync('CopyWebpackPlugin', (compilation, cb) => {
      try {
        if (!fs.copyFile) {
          console.error('Your nodejs version is too low, please upgrade!')
        } else {
          if (!fs.existsSync(this.options.dirFilesTo)) {
            fs.mkdirSync(this.options.dirFilesTo, { recursive: true })
          } else {
            delDir(this.options.dirFilesTo)
          }
          if (!fs.existsSync(this.options.dirTo)) {
            fs.mkdirSync(this.options.dirTo, { recursive: true })
          } else {
            delDir(this.options.dirTo)
          }
          if (this.options.dirFiles) {
            const files = fs.readdirSync(this.options.dirFiles, { withFileTypes: true })
            files.forEach(file => {
              if (file.isFile()) {
                fs.copyFile(path.resolve(this.options.dirFiles, file.name), path.resolve(this.options.dirFilesTo, file.name), error => {
                  if (error) {
                    console.error(file.name + '复制失败：' + error)
                  } else {
                    console.log(file.name + '复制成功！')
                  }
                })
              }
            })
          }
          if (this.options.dir) {
            const files = fs.readdirSync(this.options.dir, { withFileTypes: true })
            files.forEach(file => {
              if (file.isDirectory()) {
                copyDir(path.resolve(this.options.dir, file.name), path.resolve(this.options.dirTo, file.name), error => {
                  console.error(file.name + '复制失败!' + error)
                })
              }
            })
          }
        }
      } catch (error) {
        console.error(error)
      } finally {
        cb()
      }
    })
  }
}


/*
 * 复制目录、子目录，及其中的文件
 * @param src {String} 要复制的目录
 * @param to {String} 复制到目标目录
 */
function copyDir(src, to, callback) {
  fs.access(to, function (err) {
    if (err) {
      // 目录不存在时创建目录
      fs.mkdirSync(to)
    }
    _copy(null, src, to, callback)
  })
}

function _copy(err, src, to, callback) {
  if (err) {
    callback(err)
  } else {
    fs.readdir(src, function (err, paths) {
      if (err) {
        callback(err)
      } else {
        paths.forEach(function (path) {
          const _src = src + '/' + path
          const _to = to + '/' + path
          fs.stat(_src, function (err, stat) {
            if (err) {
              callback(err)
            } else {
              // 判断是文件还是目录
              if (stat.isFile()) {
                console.log(path + '复制成功!')
                fs.writeFileSync(_to, fs.readFileSync(_src))
              } else if (stat.isDirectory()) {
                // 当是目录是，递归复制
                copyDir(_src, _to, callback)
              }
            }
          })
        })
      }
    })
  }
}


function delDir(path) {
  let files = []
  if (fs.existsSync(path)) {
    files = fs.readdirSync(path)
    files.forEach((file) => {
      const curPath = path + '/' + file
      if (fs.statSync(curPath).isDirectory()) {
        arguments.callee(curPath) //递归删除文件夹
      } else {
        fs.unlinkSync(curPath) //删除文件
      }
    })
  }
}

然后在 webpack.config.js 文件中引用这个插件：

const path = require('path')
const CopyWebpackPlugin = require('./plugins/CopyWebpackPlugin')

module.exports = {
  ...
  ,
  plugins: [
    new CopyWebpackPlugin({
      dirFiles: path.resolve(__dirname, 'dist'),
      dirFilesTo: 'E:/Workspace/idea/mx-blog-be-java/src/main/resources/templates',
      dir: path.resolve(__dirname, 'dist'),
      dirTo: 'E:/Workspace/idea/mx-blog-be-java/src/main/resources/static',
    }),
  ],
  ...
}