阅读(1522) (25)

Webpack插件

2023-05-22 09:55:33 更新

Webpack 拥有丰富的插件接口。webpack 自身的大部分功能都使用这些插件接口。这使得 webpack 很灵活。

插件 描述
BannerPlugin 为每个 chunk 文件头部添加 banner
CommonsChunkPlugin 提取 chunk 之间的公共模块用以共享
CompressionWebpackPlugin 准备好用 Content-Encoding 格式传送的压缩版资源包
ContextReplacementPlugin 重写 require 表达式的推断上下文
CopyWebpackPlugin 复制某个文件或整个文件夹到生成目录中
DefinePlugin 允许创建一个在编译时可配置的全局常量
DllPlugin 拆分 bundles,从而大幅减少构建时间
EnvironmentPlugin 在 process.env 键上使用 ​DefinePlugin​ 的简写方式
EslintWebpackPlugin webpack 的 ESLint 插件
HotModuleReplacementPlugin 启用热更新 (HMR)
HtmlWebpackPlugin 快速创建 HTML 文件来服务 bundles
IgnorePlugin 从 bundles 包中移除某些模块
LimitChunkCountPlugin 设置 chunk 的最小/最大限制,以便更好的控制 chunk
MinChunkSizePlugin 确保 chunk 大小在指定限制之上
MiniCssExtractPlugin 为每一个包含了 CSS 的 JS 文件创建一个 CSS 文件
NoEmitOnErrorsPlugin 出现编译错误时,跳过输出阶段
NormalModuleReplacementPlugin 替换与正则表达式匹配的资源
NpmInstallWebpackPlugin 开发时自动安装缺少的依赖
ProgressPlugin 报告编译进度
ProvidePlugin 使用模块但无需使用 import/require
SourceMapDevToolPlugin 对 source map 进行更细颗粒度的控制
EvalSourceMapDevToolPlugin 对 eval source map 进行更细颗粒度的控制
TerserPlugin 在你的项目中使用 Terser 插件来压缩 JS

查找更多第三方插件,请参阅 awesome-webpack。