本文总结 Webpack5 开发中四个高频插件的实际应用。涵盖 CleanWebpackPlugin 自动清理构建目录、HtmlWebpackPlugin 生成 HTML 入口、DefinePlugin 注入全局常量以及 CopyWebpackPlugin 复制静态资源。通过具体配置示例，解决打包过程中的常见痛点，帮助开发者优化构建流程。
Webpack 是一个模块打包工具，其核心功能是将 JavaScript 文件整合打包，以便在浏览器环境中运行。此外，它还能处理转换、打包或封装其他类型的资源文件。
Webpack5 常用插件配置解析
1. CleanWebpackPlugin
痛点：每次执行打包命令后，通常需要手动删除 dist 目录以清理旧文件。使用 CleanWebpackPlugin 可以自动化这一过程，在每次构建前自动清空 dist 目录，确保输出目录的整洁。
1. 安装 npm install clean-webpack-plugin -D
2. 解构
插件大都是封装成一个class的，也可以是函数，然后到时候去调用的hook回调
因为它导出的是一个对象，所以要通过解构取出来一个类。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
4. 配置 plugins:[
new CleanWebpackPlugin(),
]2. HtmlWebpackPlugin
功能：该插件可在打包过程中自动生成一个 HTML 入口文件。通过 options 配置项，还可以指定 HTML 模板路径以及页面标题，简化 HTML 文件的维护工作。
1. 安装 npm install html-webpack-plugin -D
2. 引用 const HtmlWebpackPlugin = require('html-webpack-plugin');
3. 配置模板和标题
plugins:[
new HtmlWebpackPlugin({
template: './public/index.html',
title:"哈哈哈哈哈",
}),
]3. DefinePlugin
功能：用于设置全局基础路径或常量。它允许在编译时定义全局变量，从而在代码中直接使用这些配置好的常量，无需手动修改路径字符串。
1. 解构，webpack5自带有，导出的是一个对象解构好直接引用。
const { DefinePlugin } = require('webpack')
2. 配置模板的基础路径
plugins:[
new DefinePlugin({ // 设置基础路径
BASE_URL: "'./'"
}),
] 4. CopyWebpackPlugin
功能：在打包过程中，某些静态文件无需经过编译处理，直接复制到输出目录即可。该插件支持将单个文件或整个文件夹复制到构建目录中，并可通过 globOptions 配置忽略特定文件（如 index.html）。
1. 安装 npm install copy-webpack-plugin -D
2. 引用 const CopyWebpackPlugin= require('copy-webpack-plugin');
3. 配置模板的基础路径
plugins:[
new CopyWebpackPlugin({ //复制文件
patterns:[
{
from:'public',
to:'./',
globOptions:{
ignore:[
'**/index.html'
]
}
}
]
})
] 以上就是关于 Webpack5 常用插件配置的介绍。如需了解更多相关技术内容，建议查阅本站往期文章或继续关注后续更新，感谢支持。