跳到主要内容

webpack常用插件

  1. html-webpack-plugin - 自动生成 HTML 文件，以及将打包后的 js 文件自动引入到 HTML 中；
  2. clean-webpack-plugin - 自动清除打包后的文件夹；
  3. copy-webpack-plugin - 将文件或文件夹从原路径复制到打包后的路径；
  4. uglifyjs-webpack-plugin - 压缩 js 代码；
  5. mini-css-extract-plugin - 将 CSS 抽取出来成为单独的文件，以减少 HTML 中的内联样式；
  6. optimize-css-assets-webpack-plugin - 压缩 CSS 代码；
  7. imagemin-webpack-plugin - 压缩图片文件；
  8. webpack-bundle-analyzer - 分析打包后文件的大小，以优化打包；
  9. provide-plugin - 配置全局变量，webpack 会在编译时自动加载模块；
  10. webpack-dev-server - 提供本地开发服务器，支持热更新等功能。
  11. webpack-dashboard - 在命令行中使用 webpack，并显示优美的仪表盘。
  12. webpack-merge - 用于合并 webpack 配置文件，将多个配置文件合并成一个配置文件。
  13. webpack-manifest-plugin - 用于生成一个 manifest.json 文件，该文件包含打包后的文件清单，可以用于缓存优化。
  14. webpack-bundle-size-analyzer - 用于分析打包后每个模块的大小，可用于针对性地进行代码优化。
  15. file-loader - 用于将资源文件复制到输出目录，并根据需要调整文件名，适用于加载图片、字体等资源。
  16. url-loader - 用于将资源文件编码为 base64 并嵌入到 JavaScript 代码中，减少 HTTP 请求。
  17. webpack-notifier - 桌面通知插件，用于在构建完成后发送通知消息。
  18. eslint-webpack-plugin - 在 webpack 构建过程中运行 ESLint 静态分析工具以检查 JavaScript 代码格式是否正确。
  19. compression-webpack-plugin - 用于在应用程序打包时对输出文件进行 gzip 压缩。
  20. hard-source-webpack-plugin - 为了加快webpack的构建速度，将模块缓存到磁盘中，这样在多次构建时它们就不需要被重新编译。
  21. webpack-monitor - 为您提供有关您的webpack生成的捆绑包的实时动态和附加细节，并以可见的方式显示它们。
  22. fork-ts-checker-webpack-plugin - 用于单独的进程内执行TypeScript类型检查，而不是像常规ts-loader一样与webpack交错。
  23. offline-plugin - 生成web应用离线缓存。
  24. webpack-combine-loaders - 用户合并loader，同时支持对这些loaders的ttl快速缓存。
  25. copy-webpack-plugin - 在构建中拷贝已存在的文件夹到新的目录中。
  26. add-asset-html-webpack-plugin - 将额外的chunk文件输出到HTML文件中.
  27. webpack-manifest-plugin - 输出一个manifest.json，记录了所有输出文件的映射关系，可以用于服务器端，动态的读取客户端生成的文件名。
  28. webpack-bundle-size-analyzer - 分析 webpack 输出的包的大小，以便您可以更好地优化应用程序性能。
  29. friendly-errors-webpack-plugin - 使 webpack的错误信息更加可读和友好，让错误信息的查找更加容易。
  30. webpack-pwa-manifest - 用于将移动应用程序元数据转换为 Web App Manifest，并生成用于正式部署的 icons 和启动图标。
  31. webpack-definer - 在 JavaScript 应用程序构建期间声明全局变量，方便在编译阶段做一些别的事情，如给业务代码注入一些环境变量等。
  32. webpack-obfuscator - 帮助您在打包过程中混淆和压缩 JavaScript 代码，以保证源代码的安全性。
  33. webpack-shell-plugin-next - 在构建期间执行 shell 脚本，可以用于自动化部署、复制文件、安装依赖等操作。
  34. sass-resources-loader - 提供了一个全局 Sass 样式变量和 mixin 的解决方案，可以让 Sass 变量和 mixin 被自动注入到 webpack 的每个 Sass 模块中。
  35. webpack-node-externals - 将 node_modules 中的模块排除在 bundle 之外，以便减小打包后的文件大小。