一、HtmlWebpackPlugin ⭐⭐⭐⭐⭐
作用
自动生成 HTML 文件，并将打包后的 JavaScript、CSS 等资源自动注入到生成的 HTML 文件中。当打包文件名包含哈希值时，能避免手动引入资源的繁琐。
使用场景
单页或多页应用开发中，只要需生成 HTML 并引入打包资源即可使用。
语法介绍
npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {plugins: [new HtmlWebpackPlugin({title: 'My App',template: './src/index.html',filename: 'index.html'})]
};
二、MiniCssExtractPlugin ⭐⭐⭐⭐
作用
将 CSS 从 JavaScript 代码中提取出来，生成单独的 CSS 文件，利于浏览器并行加载和缓存管理。
使用场景
生产环境中优化页面性能。
语法介绍
npm install mini-css-extract-plugin --save-dev
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader']}]},plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash].css'})]
};
三、CleanWebpackPlugin ⭐⭐⭐⭐
作用
每次打包前清空输出目录，避免旧文件残留。
使用场景
项目开发和部署时，确保输出目录干净。
语法介绍
npm install clean-webpack-plugin --save-dev
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {plugins: [new CleanWebpackPlugin()]
};
四、TerserWebpackPlugin ⭐⭐⭐⭐
作用
压缩和混淆 JavaScript 代码，减少文件体积，支持并行压缩。
使用场景
生产环境减小 JavaScript 文件大小。
语法介绍
npm install terser-webpack-plugin --save-dev
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {optimization: {minimizer: [new TerserPlugin({terserOptions: {compress: { drop_console: true }}})]}
};
五、OptimizeCSSAssetsPlugin ⭐⭐⭐
作用
对提取的 CSS 文件进行压缩和优化，移除空格、注释等。
使用场景
生产环境与 MiniCssExtractPlugin 配合优化 CSS。
语法介绍
npm install optimize-css-assets-webpack-plugin --save-dev
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {optimization: {minimizer: [new OptimizeCSSAssetsPlugin({})]}
};
六、CopyWebpackPlugin ⭐⭐⭐
作用
将单个文件或整个目录复制到打包输出目录。
使用场景
项目中有无需 Webpack 处理的静态资源时。
语法介绍
npm install copy-webpack-plugin --save-dev
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {plugins: [new CopyWebpackPlugin({patterns: [{ from: 'src/assets', to: 'assets' }]})]
};
七、DefinePlugin ⭐⭐⭐
作用
在编译时创建全局常量，可用于区分不同环境。
使用场景
根据不同环境（开发、测试、生产）设置不同配置。
语法介绍
const webpack = require('webpack');
module.exports = {plugins: [new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')})]
};
八、HotModuleReplacementPlugin ⭐⭐⭐⭐
作用
实现热模块替换（HMR）功能，不刷新整个页面，只更新变化模块。
使用场景
开发环境提高开发效率。
语法介绍
const webpack = require('webpack');
module.exports = {devServer: { hot: true },plugins: [new webpack.HotModuleReplacementPlugin()]
};
九、ProvidePlugin ⭐⭐⭐
作用
自动加载模块，而不必在每个文件中都引入。例如，当你在项目中频繁使用某个库（如 jQuery）时，使用该插件可以避免在每个文件中都写 import $ from 'jquery'。
使用场景
项目中某些模块被大量使用，为了简化代码引入过程。
语法介绍
npm install jquery --save
const webpack = require('webpack');
module.exports = {plugins: [new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'})]
};
十、UglifyJsWebpackPlugin ⭐⭐
作用
压缩 JavaScript 代码，移除不必要的空格、注释，缩短变量名等，减小文件体积。不过在 Webpack 4 之后，推荐使用 TerserWebpackPlugin，因为它支持 ES6+ 语法的压缩。
使用场景
生产环境对 JavaScript 代码进行压缩。
语法介绍
npm install uglifyjs-webpack-plugin --save-dev
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {optimization: {minimizer: [new UglifyJsPlugin()]}
};
十一、WebpackBundleAnalyzer ⭐⭐⭐
作用
生成可视化的打包分析报告，展示每个模块的大小、依赖关系等信息，帮助开发者找出打包文件中体积过大的模块，从而进行优化。
使用场景
优化打包文件体积，分析依赖关系时。
语法介绍
npm install webpack-bundle-analyzer --save-dev
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {plugins: [new BundleAnalyzerPlugin()]
};
十二、CompressionWebpackPlugin ⭐⭐⭐
作用
在打包时对资源文件（如 JavaScript、CSS）进行压缩，生成对应的 .gz 或 .br（Brotli 压缩）文件，服务器可以直接返回压缩后的文件，减少传输体积，提高页面加载速度。
使用场景
生产环境优化页面加载性能。
语法介绍
npm install compression-webpack-plugin --save-dev
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {plugins: [new CompressionPlugin()]
};
十三、FriendlyErrorsWebpackPlugin ⭐⭐⭐
作用
美化 Webpack 的错误信息和提示，使错误信息更易读，帮助开发者快速定位和解决问题。
使用场景
开发环境中，让开发者更方便地查看和处理打包过程中的错误。
语法介绍
npm install friendly-errors-webpack-plugin --save-dev
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
module.exports = {plugins: [new FriendlyErrorsPlugin()]
};
十四、ImageMinWebpackPlugin ⭐⭐
作用
在打包过程中对图片进行压缩，减小图片文件体积，同时保持图片质量，从而优化页面加载速度。
使用场景
项目中有大量图片资源时。
语法介绍
npm install image-min-webpack-plugin --save-dev
const ImageMinPlugin = require('image-min-webpack-plugin').default;
module.exports = {plugins: [new ImageMinPlugin({test: /\.(jpe?g|png|gif|svg)$/i})]
};
十五、IgnorePlugin ⭐⭐
作用
忽略某些特定的模块，不将其打包到最终的文件中。例如，在国际化项目中，可能会引入一些语言包，但在某些场景下只需要部分语言包，就可以使用该插件忽略其他语言包。
使用场景
避免打包不必要的模块，减小打包文件体积。
语法介绍
const webpack = require('webpack');
module.exports = {plugins: [new webpack.IgnorePlugin({resourceRegExp: /^\.\/locale$/,contextRegExp: /moment$/})]
};
十六、BannerPlugin ⭐⭐
作用
在打包后的文件头部添加版权信息、注释等内容。可以帮助开发者声明版权，方便后续维护和管理。
使用场景
为打包后的文件添加版权声明、版本信息等。
语法介绍
const webpack = require('webpack');
module.exports = {plugins: [new webpack.BannerPlugin('版权所有，禁止盗用')]
};
十七、Webpack.ProgressPlugin ⭐⭐
作用
在控制台显示 Webpack 的打包进度，让开发者了解打包的实时状态。
使用场景
大型项目打包时，方便开发者监控打包进度。
语法介绍
const webpack = require('webpack');
module.exports = {plugins: [new webpack.ProgressPlugin()]
};
十八、Webpackbar ⭐⭐⭐
作用
在控制台显示美观、简洁的打包进度条和状态信息，相比 Webpack.ProgressPlugin 有更友好的界面展示。
使用场景
开发和构建过程中，实时了解打包进度。
语法介绍
npm install webpackbar --save-dev
const WebpackBar = require('webpackbar');
module.exports = {plugins: [new WebpackBar()]
};
