常用 Webpack Plugin 汇总

一、HtmlWebpackPlugin ⭐⭐⭐⭐⭐

作用

自动生成 HTML 文件，并将打包后的 JavaScript、CSS 等资源自动注入到生成的 HTML 文件中。当打包文件名包含哈希值时，能避免手动引入资源的繁琐。

使用场景

单页或多页应用开发中，只要需生成 HTML 并引入打包资源即可使用。

语法介绍

bash 复制代码

npm install html-webpack-plugin --save-dev

javascript 复制代码

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 文件，利于浏览器并行加载和缓存管理。

使用场景

生产环境中优化页面性能。

语法介绍

bash 复制代码

npm install mini-css-extract-plugin --save-dev

javascript 复制代码

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 ⭐⭐⭐⭐

作用

每次打包前清空输出目录，避免旧文件残留。

使用场景

项目开发和部署时，确保输出目录干净。

语法介绍

bash 复制代码

npm install clean-webpack-plugin --save-dev

javascript 复制代码

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    plugins: [new CleanWebpackPlugin()]
};

四、TerserWebpackPlugin ⭐⭐⭐⭐

作用

压缩和混淆 JavaScript 代码，减少文件体积，支持并行压缩。

使用场景

生产环境减小 JavaScript 文件大小。

语法介绍

bash 复制代码

npm install terser-webpack-plugin --save-dev

javascript 复制代码

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: { drop_console: true }
                }
            })
        ]
    }
};

五、OptimizeCSSAssetsPlugin ⭐⭐⭐

作用

对提取的 CSS 文件进行压缩和优化，移除空格、注释等。

使用场景

生产环境与 MiniCssExtractPlugin 配合优化 CSS。

语法介绍

bash 复制代码

npm install optimize-css-assets-webpack-plugin --save-dev

javascript 复制代码

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})]
    }
};

六、CopyWebpackPlugin ⭐⭐⭐

作用

使用场景

项目中有无需 Webpack 处理的静态资源时。

语法介绍

bash 复制代码

npm install copy-webpack-plugin --save-dev

javascript 复制代码

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                { from: 'src/assets', to: 'assets' }
            ]
        })
    ]
};

七、DefinePlugin ⭐⭐⭐

作用

在编译时创建全局常量，可用于区分不同环境。

使用场景

根据不同环境（开发、测试、生产）设置不同配置。

语法介绍

javascript 复制代码

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
};

八、HotModuleReplacementPlugin ⭐⭐⭐⭐

作用

实现热模块替换（HMR）功能，不刷新整个页面，只更新变化模块。

使用场景

开发环境提高开发效率。

语法介绍

javascript 复制代码

const webpack = require('webpack');
module.exports = {
    devServer: { hot: true },
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

九、ProvidePlugin ⭐⭐⭐

作用

自动加载模块，而不必在每个文件中都引入。例如，当你在项目中频繁使用某个库（如 jQuery）时，使用该插件可以避免在每个文件中都写 import $ from 'jquery'。

使用场景

项目中某些模块被大量使用，为了简化代码引入过程。

语法介绍

bash 复制代码

npm install jquery --save

javascript 复制代码

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]
};

十、UglifyJsWebpackPlugin ⭐⭐

作用

压缩 JavaScript 代码，移除不必要的空格、注释，缩短变量名等，减小文件体积。不过在 Webpack 4 之后，推荐使用 TerserWebpackPlugin，因为它支持 ES6+ 语法的压缩。

使用场景

生产环境对 JavaScript 代码进行压缩。

语法介绍

bash 复制代码

npm install uglifyjs-webpack-plugin --save-dev

javascript 复制代码

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [new UglifyJsPlugin()]
    }
};

十一、WebpackBundleAnalyzer ⭐⭐⭐

作用

生成可视化的打包分析报告，展示每个模块的大小、依赖关系等信息，帮助开发者找出打包文件中体积过大的模块，从而进行优化。

使用场景

优化打包文件体积，分析依赖关系时。

语法介绍

bash 复制代码

npm install webpack-bundle-analyzer --save-dev

javascript 复制代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
};

十二、CompressionWebpackPlugin ⭐⭐⭐

作用

在打包时对资源文件（如 JavaScript、CSS）进行压缩，生成对应的 .gz 或 .br（Brotli 压缩）文件，服务器可以直接返回压缩后的文件，减少传输体积，提高页面加载速度。

使用场景

生产环境优化页面加载性能。

语法介绍

bash 复制代码

npm install compression-webpack-plugin --save-dev

javascript 复制代码

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
    plugins: [new CompressionPlugin()]
};

十三、FriendlyErrorsWebpackPlugin ⭐⭐⭐

作用

美化 Webpack 的错误信息和提示，使错误信息更易读，帮助开发者快速定位和解决问题。

使用场景

开发环境中，让开发者更方便地查看和处理打包过程中的错误。

语法介绍

bash 复制代码

npm install friendly-errors-webpack-plugin --save-dev

javascript 复制代码

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
    plugins: [new FriendlyErrorsPlugin()]
};

十四、ImageMinWebpackPlugin ⭐⭐

作用

在打包过程中对图片进行压缩，减小图片文件体积，同时保持图片质量，从而优化页面加载速度。

使用场景

项目中有大量图片资源时。

语法介绍

bash 复制代码

npm install image-min-webpack-plugin --save-dev

javascript 复制代码

const ImageMinPlugin = require('image-min-webpack-plugin').default;
module.exports = {
    plugins: [
        new ImageMinPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i
        })
    ]
};

十五、IgnorePlugin ⭐⭐

作用

忽略某些特定的模块，不将其打包到最终的文件中。例如，在国际化项目中，可能会引入一些语言包，但在某些场景下只需要部分语言包，就可以使用该插件忽略其他语言包。

使用场景

避免打包不必要的模块，减小打包文件体积。

语法介绍

javascript 复制代码

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.IgnorePlugin({
            resourceRegExp: /^\.\/locale$/,
            contextRegExp: /moment$/
        })
    ]
};

十六、BannerPlugin ⭐⭐

作用

在打包后的文件头部添加版权信息、注释等内容。可以帮助开发者声明版权，方便后续维护和管理。

使用场景

语法介绍

javascript 复制代码

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.BannerPlugin('版权所有，禁止盗用')
    ]
};

十七、Webpack.ProgressPlugin ⭐⭐

作用

在控制台显示 Webpack 的打包进度，让开发者了解打包的实时状态。

使用场景

大型项目打包时，方便开发者监控打包进度。

语法介绍

javascript 复制代码

const webpack = require('webpack');
module.exports = {
    plugins: [new webpack.ProgressPlugin()]
};

十八、Webpackbar ⭐⭐⭐

作用

在控制台显示美观、简洁的打包进度条和状态信息，相比 Webpack.ProgressPlugin 有更友好的界面展示。

使用场景

开发和构建过程中，实时了解打包进度。

语法介绍

bash 复制代码

npm install webpackbar --save-dev

javascript 复制代码

const WebpackBar = require('webpackbar');
module.exports = {
    plugins: [new WebpackBar()]
};