摘要

CopyWebpackPlugin 是一個(gè)強(qiáng)大的 Webpack 插件，用于將文件從源目錄復(fù)制到構(gòu)建目錄。在本文中，我們將探討 CopyWebpackPlugin 的一些常用 API，并提供示例代碼。

在構(gòu)建 Web 應(yīng)用程序時(shí)，通常需要將一些靜態(tài)文件（如 HTML、CSS、圖片等）從源目錄復(fù)制到構(gòu)建目錄。為了實(shí)現(xiàn)這一功能，我們可以使用 CopyWebpackPlugin。這個(gè)插件可以將源文件復(fù)制到構(gòu)建目錄，并且可以自定義復(fù)制行為。

常用 API

1. patterns：一個(gè)數(shù)組，包含要復(fù)制的源文件和目標(biāo)文件的信息。每個(gè)數(shù)組元素都是一個(gè)對(duì)象，其中包含以下屬性：

• from：源文件路徑或模式?？梢允亲址蛘齽t表達(dá)式。
• to：目標(biāo)文件路徑。可以是字符串或函數(shù)。
• toType：目標(biāo)文件類型?？梢允?'file' 或 'dir'。默認(rèn)值是 'file'。
• flatten：是否將源文件復(fù)制到目標(biāo)文件的子目錄中。默認(rèn)值是 false。
• transform：一個(gè)函數(shù)，用于在復(fù)制文件之前對(duì)源文件進(jìn)行轉(zhuǎn)換。

2. options：一個(gè)對(duì)象，包含一些全局選項(xiàng)，如 concurrency（并發(fā)復(fù)制的文件數(shù)）和 overwrite（是否覆蓋已存在的文件）。
3. filter：

示例

下面是一個(gè)簡單的 CopyWebpackPlugin 配置示例：

const CopyPlugin = require('copy-webpack-plugin');module.exports = {plugins: [new CopyPlugin({patterns: [{from: 'src/index.html',to: 'dist/index.html'},{from: 'src/assets',to: 'dist/assets'},{from: 'src/images',to: 'dist/images',toType: 'dir'},{from: 'src/styles.css',to: 'dist/styles.css',transform: (content, path) => minifyCSS(content)},{from: '**/*',to: './',globOptions: {ignore: ['**/*.js', '**/*.scss', '**/*.ts']}},{from: "public/**/*",filter: async (resourcePath) => {const data = await fs.promises.readFile(resourcePath);const content = data.toString();if (content === "my-custom-content") {return false;}return true;},},],options: {concurrency: 10,overwrite: true}})]
};

在這個(gè)示例中，我們創(chuàng)建了一個(gè) CopyWebpackPlugin 實(shí)例，并指定了要復(fù)制的文件和目錄。第一個(gè)模式將 src/index.html 文件復(fù)制到 dist/index.html 文件，第二個(gè)模式將 src/assets 目錄復(fù)制到 dist/assets 目錄，第三個(gè)模式將 src/images 目錄復(fù)制到 dist/images 目錄，第四個(gè)模式將 src/styles.css 文件復(fù)制到 dist/styles.css 文件，并在復(fù)制之前對(duì)內(nèi)容進(jìn)行轉(zhuǎn)換（例如，壓縮 CSS）。我們還指定了一些全局選項(xiàng)，如并發(fā)復(fù)制的文件數(shù)和是否覆蓋已存在的文件。

文檔

npmjs.com/package/copy-webpack-plugin