开源项目 `copy-webpack-plugin` 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00409/article/details/141418777

开源项目 `copy-webpack-plugin` 使用教程

copy-webpack-plugin项目地址:https://gitcode.com/gh_mirrors/cop/copy-webpack-plugin

1. 项目的目录结构及介绍

copy-webpack-plugin 是一个用于复制文件和目录到构建目录的 Webpack 插件。以下是其基本的目录结构：

copy-webpack-plugin/
├── src/
│   ├── index.js
│   └── utils.js
├── test/
│   ├── integration/
│   └── unit/
├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

src/: 包含插件的主要源代码。
- index.js: 插件的入口文件。
- utils.js: 包含一些辅助函数。
test/: 包含插件的测试代码。
- integration/: 集成测试。
- unit/: 单元测试。
.babelrc: Babel 配置文件。
.eslintrc: ESLint 配置文件。
.gitignore: Git 忽略文件列表。
.npmignore: npm 忽略文件列表。
.travis.yml: Travis CI 配置文件。
LICENSE: 项目许可证。
package.json: 项目依赖和脚本配置。
README.md: 项目说明文档。
webpack.config.js: Webpack 配置示例。

2. 项目的启动文件介绍

copy-webpack-plugin 的启动文件是 src/index.js。这个文件导出了插件的主要功能，包括初始化和处理复制逻辑。

// src/index.js
const path = require('path');
const fs = require('fs');
const { RawSource } = require('webpack-sources');
const globby = require('globby');
const slash = require('slash');
const schemaUtils = require('schema-utils');
const schema = require('./schema.json');
const { getOptions } = require('loader-utils');
const { validate } = require('schema-utils');
const { isWebpack5 } = require('./utils');

class CopyPlugin {
  constructor(options = {}) {
    validate(schema, options, {
      name: 'Copy Plugin',
      baseDataPath: 'options',
    });

    this.options = options;
  }

  apply(compiler) {
    const { patterns, options } = this.options;

    compiler.hooks.thisCompilation.tap('CopyPlugin', (compilation) => {
      compilation.hooks.additionalAssets.tapAsync('CopyPlugin', async (callback) => {
        // 复制逻辑
      });
    });
  }
}

module.exports = CopyPlugin;

启动文件介绍

构造函数: 初始化插件选项并进行验证。
apply 方法: 注册到 Webpack 编译过程，处理文件复制逻辑。

3. 项目的配置文件介绍

copy-webpack-plugin 的配置文件是 webpack.config.js。这个文件包含了如何使用插件的示例配置。

// webpack.config.js
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src/assets', to: 'assets' },
        { from: 'public', to: 'public' },
      ],
      options: {
        concurrency: 100,
      },
    }),
  ],
};