一、优化类插件

1. mini-css-extract-plugin

2. css-minimizer-webpack-plugin

3. terser-webpack-plugin

4. clean-webpack-plugin

5. copy-webpack-plugin

二、加载器 Loader

6. less-loader / sass-loader

7. postcss-loader

8. babel-loader

三、Webpack 内置功能

9. splitChunks 代码分割

10. tree-shaking 摇树优化

11. hotModuleReplacement 热更新

12. asset/resource（Webpack5 新功能）

四、效率工具

13. DefinePlugin

14. ProvidePlugin

15. webpack-bundle-analyzer

五、总结

样式类mini-css-extract-plugin抽离 CSScss-minimizer压缩 CSS

JS 类terser压缩 JSbabel-loader转 ES5

优化类splitChunks抽离公共代码tree-shaking删除无用代码

工具类copy-webpack-plugin复制文件bundle-analyzer分析包体积

Webpack5 新特性内置资源模块，不用file-loader内置clean: true，不用清理插件

如果你觉得文章内容有用，请记得点赞、收藏、转发。

点击下面的公众号名片直接关注！