Webpack15个 实用插件 让你眼前一亮！

1. extract-text-webpack-plugin

初衷： 分享一下工作中实用的几个Plugin，希望对大家有些帮助，不喜勿喷。

用途： 将css样式从js文件中提取出来最终合成一个css文件，该插件只支持webpack4之前的版本，如果你当前是webpack4及以上版本那么就会报错。

上面配置中，extractTextPlug…

2. optimize-css-assets-webpack-plugin

初衷： 众所周知我们webpack打包后生成的css文件会十分臃肿，影响加载速度，所以这里需要css压缩

用途： 顾名思义，它主要是对你的代码进行压缩和优化，并且可以和extract-text-webpack-plugin插件配合使用，这样就可以让你的CSS样式文件更加精简。

3. compression-webpack-plugin

初衷： 压缩打包后的js和css文件，体积变得更小

用途： 它可以对你的JavaScript文件进行压缩和优化，有效减小文件大小。

4. webpack-hot-middleware / webpack-dev-middleware

初衷： 提高热更新和启动速度

用途： 众所周知，在开发过程中，我们通常需要对代码进行频繁的修改和更新。而Webpack的热更新功能可以让你的代码在修改后自动更新，而无需重新启动整个应用程序。

5. copy-webpack-plugin

初衷： copy静态资源插件

用途： 使用它可以将静态资源从一个目录复制到另一个目录，非常方便。

6. uglifyjs-webpack-plugin

用途： 该插件可以对您的JavaScript代码进行压缩，让它们更小更快。

7. eslint-webpack-plugin

用途： 该插件可以帮助你检测代码中的错误和最佳实践，提高代码质量。

8. webpack-bundle-analyzer

初衷： 分析代码打包的体积情况，提高优化方案

用途： 该插件可以帮助你分析你的Webpack构建，并生成一个可视化的报告，以便你了解哪些模块占用了最大的空间。

9. stylelint-webpack-plugin

用途： 该插件可以帮助你检查CSS代码中的错误和最佳实践，提高代码质量。

10. webpackbar

用途： 该插件可以在Webpack构建过程中显示一个进度条，方便你了解构建的进展情况。

11. terser-webpack-plugin

用途： 该插件可以对你的JavaScript代码进行压缩，让它们更小更快。

12. html-webpack-plugin

用途： 该插件可以帮助你生成HTML文件，并自动将你的JavaScript和CSS文件注入到HTML中。

13. clean-webpack-plugin

用途： 该插件可以在Webpack构建之前清除输出目录中的旧文件。

14. mini-css-extract-plugin

用途： 该插件可以将CSS样式从JavaScript代码中提取出来，并生成一个单独的CSS文件。

15. webpack-md5-hash

初衷： 给打包后的文件加上哈希值防止缓存

用途： 给你的JavaScript和CSS文件添加MD5哈希值，这样可以防止它们被浏览器缓存。