# 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

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