Skip to content

webpack 常用插件

统计信息：字数 20818 阅读42分钟

https://webpack.docschina.org/plugins/

官方插件

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。

Webpack Plugins

  • DefinePlugin: Create global constants which can be configured at compile time. -- Maintainer: Webpack Team Github
  • Compression Plugin: Prepare assets to serve with Content-Encoding. -- Maintainer: Webpack Team Github
  • Offline Plugin: Offline plugin (ServiceWorker, AppCache) for Webpack. -- Maintainer: Arthur Stolyar Github Twitter
  • Rewire Plugin: Dependency injection for Webpack bundles. -- Maintainer: Johannes Ewald Github Twitter
  • HTML Webpack Plugin: Simplifies creation of HTML files. -- Maintainer: Jan Nicklas Github Twitter
  • Copy Webpack Plugin: Copy files and directories in webpack. -- Maintainer: Len Boyette Github Twitter
  • Split By Path: Split By Path Webpack Plugin. -- Maintainer: Bohdan Tkachenko Github Twitter
  • SW Precache - Generates a service worker to precache bundle. -- Maintainer: Will Farley Github
  • CoreJS Plugin - Core-JS as a webpack plugin. -- Maintainer: PatrickJS Github
  • Bundle Analyzer - Utility that represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin Github
  • Module Mapping - Maps modules onto different files. -- Maintainer: Spartez Team Github Twitter
  • Serverless Webpack - Serverless plugin to bundle your lambdas. -- Maintainer: Elastic Coders Github Twitter
  • Prerender SPA - Framework-agnostic static site generation for SPAs. -- Maintainer: Chris Fritz Github Twitter
  • Static Site Generator Plugin - Minimal, unopinionated static site generator. -- Maintainer: Mark Dalgleish Github
  • SVG Sprite Plugin - Plugin for SVG sprites and icons. -- Maintainer: Jeremy Tice (TodayTix) Github Twitter
  • Imagemin Webpack Plugin - Minify images with Imagemin. -- Maintainer: Gregory Benner Github Twitter
  • Prepack Webpack Plugin - A webpack plugin for prepack. -- Maintainer: Gajus Kuizinas Github
  • Modules CDN Webpack Plugin - Dynamically load your modules from a CDN. -- Maintainer: Thomas Sileghem Github
  • Generate package.json Plugin - Limit dependencies in a deployment package.json to only those that are actually being used by your bundle. -- Maintainer: Paul Myburgh Github
  • Progressive Web App Manifest - PWA manifest manager and generator. -- Maintainer: Arthur A. Bergamaschi Github
  • FileManager Webpack Plugin - Copy, move, delete files and directories before and after Webpack builds -- Maintainer: Gregory Nowakowski Github
  • Fork TS Checker Webpack Plugin - Webpack plugin that runs typescript type checker on a separate process. -- Maintainer: TypeStrong Team Github
  • Duplicate Package Checker Webpack Plugin - Warns you when multiple versions of the same package exist in your bundle -- Maintainer: Darren Scerri Github
  • Circular Dependency Plugin - Detect modules with circular dependencies when bundling -- Maintainer: Aaron Ackerman Github
  • webpack-inject-plugin - A webpack plugin to dynamically inject code into the bundle. -- Maintainer: Adam Dierkens Github
  • Public Path Manipulation Plugin - control publicPath of dynamically loaded resources at runtime -- Maintainer: Andrew Goldis Github
  • Build Notifier Plugin - Display OS-level notifications for build errors and warnings. -- Maintainer: Rocco Cataldo Github
  • CSS Cleanup Webpack Plugin - A plugin to remove duplicated and unused css rules -- Maintainer: Dominik Weber Github
  • Extension Reloader - Hot reloading while developing browser extensions -- Maintainer: Rubens P. G. Cavalcante Github Twitter
  • Htmls Webpack Plugin: Simple and fast multiple-htmls-generating plugin for webpack. -- Maintainer: Zack Young Github Twitter
  • Mini css extract plugin: Lightweight CSS extraction plugin -- Maintainer: Webpack Contrib Github
  • build-hash-webpack-plugin For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- Maintainer: Réda Housni Alaoui Github Twitter
  • webpack-hook-plugin - run any shell commands before or after webpack builds -- Maintainer: David Kwon Github
  • Dynamic Vendor Webpack Plugin - Gives you a way to import vendors with dynamic variable and specific code splitting. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Define Variable Webpack Plugin - Enhancement of DefinePlugin to store defined things in actual variables. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Shell Script Webpack Plugin - A plugin for running arbitrary shell scripts when compiler hooks are triggered. -- Maintainer Drew Loomer Github Twitter
  • Stylelint Webpack Plugin: A Stylelint plugin for webpack. -- Maintainer: Ricardo Gobbo de Souza Github
  • ESLint Webpack Plugin: A ESLint plugin for webpack . -- Maintainer: Ricardo Gobbo de Souza Github
  • Exclude Assets Webpack Plugin: A plugin to exclude assets from webpack output based on a path RegExp pattern. -- Maintainer: Klayton Faria Github
  • Webpack Shell Plugin Next: A plugin allows you to run any shell commands before or after webpack builds. -- Maintainer: Kuzmin Pavel Github
  • Gettext Webpack Plugin: Embed localization into your bundle using gettext. -- Maintainer: Juan Luis Paz Github
  • Node Polyfill Plugin: Polyfill Node.js core modules. -- Maintainer: Richie Bendall Github Twitter
  • Bytenode Plugin: Compile JavaScript into bytecode using bytenode. -- Maintainer: Herbert Treis Neto Github
  • Chrome Extension Archive Webpack Plugin Create archive file to publish Chrome Exentions to Chrome Web Store -- Maintainer: KeisukeYamashita Github
  • Layer-pack Webpack Plugin Allow to glob imports file & directories, build mono repo apps via inheritable source code / npm packages & share webpack configs -- Maintainer: Braun Nathanaël Github
  • webpack-typescript-directory-compile-plugin Configure an source directory of typescript files and an output directory for JavaScript files. Each typescript file in the source directory and any newly added files will be compiled to individual JavaScript files. -- Maintainer: Stephen Sigwart Github
  • CycloneDX Webpack Plugin: Create CycloneDX Software Bill of Materials (SBOM) from webpack bundles at compile time. -- Maintainer: OWASP CycloneDX Team Github
Last update: November 9, 2024