Webpack Plugin

性能/编译相关

  • clean-webpack-plugin

    在每次 build 后移除你的dist目录（可配置），默认情况下它会读取 webpack 配置的output.path。

  • copy-webpack-plugin

    用于将静态文件拷贝到你的输出目录下，有时一些文件并没有适用的 loader 或者是不需要经过处理，原样复制的文件。

  • html-webpack-plugin

    这个大部分人应该都知道，自动创建 HTML 模板供 Webpack 打包结果使用，功能还是蛮强大的，包括文件名称 模板参数 meta 标签配置 压缩等等。SPA 与 MPA 都会使用到。

  • lodash-webpack-plugin

    这个的话，忘记是不是能被摇树优化或者babel-plugin-import替换掉了，用来实现 Lodash 的按需加载。

  • mini-css-extract-plugin

    用来将行内 CSS 抽离成.css文件，支持按需加载和 SourceMap，性能也比extract-text-webpack-plugin更好

  • optimize-css-assets-webpack-plugin

    优化 & 压缩 CSS 文件，可以选择使用的 CSS 预处理器（默认是cssnano）

  • terser-webpack-plugin

    一个使用terser来压缩 JS 文件的插件，支持多进程压缩和 Terser 选项配置。

  • hard-source-webpack-plugin

    webpack5 的亮点之一，卖点是缓存效果，第二次打包最高可以减少 95%以上的时间，但好像还有点坑没解决掉，观望中。webpack5 应该是内置它的。

  • npm-install-webpack-plugin

    自动安装并保存依赖，这样就不用每次暂停掉编译进程了，和 Parcel 的思路相同，自动安装缺失的 loader 等等。

  • prepack-webpack-plugin

    为prepack打造的 webpack 插件

  • dotenv-webpack

    用于控制环境变量注入，感觉是dotenv的融合版

  • react-refresh-webpack-plugin

    React 的项目的热重载

效率/排查/美化相关

  • webpack-bundle-analyzer

    分析产物大小，感觉比较直观

    webpack bundle analyzer zoomable treemap

  • friendly-errors-webpack-plugin

    应该大部分官方的 cli 工具都集成了它，因为的确好看

    lint

    babel

  • webpackbar

    芜湖，我最爱的插件！最开始是在 Vuepress 见到的，当时还不知道这是一个独立的模块。webpack 进度条，配合 chalk 啊还有上面的插件，给你炫酷的编译过程~

    img

  • webpackmonitor

    webpack monitor analysis tool

    也是很炫酷的一个插件~ 但是现在已经不维护了，所以慎重使用。