Webpack Plugin

性能/编译相关

• clean-webpack-plugin (opens new window)

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

• copy-webpack-plugin (opens new window)

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

• html-webpack-plugin (opens new window)

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

• lodash-webpack-plugin (opens new window)

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

• mini-css-extract-plugin (opens new window)

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

• optimize-css-assets-webpack-plugin (opens new window)

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

• terser-webpack-plugin (opens new window)

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

• hard-source-webpack-plugin (opens new window)

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

• npm-install-webpack-plugin (opens new window)

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

• prepack-webpack-plugin (opens new window)

  为prepack (opens new window)打造的 webpack 插件

• dotenv-webpack (opens new window)

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

• react-refresh-webpack-plugin (opens new window)

  React 的项目的热重载

效率/排查/美化相关

• webpack-bundle-analyzer (opens new window)

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

  

• friendly-errors-webpack-plugin (opens new window)

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

  

  

• webpackbar (opens new window)

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

  

• webpackmonitor (opens new window)

  

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