在前端开发中，除了熟练使用框架，我们还要使用一样技术就是webpack，webpack相信很多小伙伴都多少有些了解，但是很多人可能对webpack不是特别熟练，只是知道基本的loader配置，甚至自己配置了loader都不知道这个loader的作用。我也曾经遇到过这样的问题，但是各种百度和google都没能找到特别全的loader介绍，所以我花一些时间整理了所有的loader终于解决了自己的痛点，今天我也把它分享给大家希望能够帮助一些前端开发的小伙伴。 webpack 1. url-loader:将小于limit的图片转成base64来减少http请求，如果大于就用http请求 2. vue-loader:解析和转换.vue文件并提取其中的script，style，template然后由对应的loader去处理 3. vue-template-compiler：把template编译成可执行的js代码 4. css-loader：打包css文件和处理css文件 5. style-loader：负责将css-loader加载到的css样式动态的添加到html -> head -> style标签中，style-loader尽量与css-loader结合使用 6. babel-core：首先将代码解析，生成抽象语法树（ast），然后对ast进行遍历，进行添加、更新、移除等操作，然后在将遍历后的的ast转换成js代码， 7. babel-loader：把高级写法编译成浏览器所认识的普通写法（也就是es6转换成es5） 8. babel-preset-env：支持es6,7,8的语法 9. babel-polyfill：babel只是默认转换新的javascript语法，不能转换新的api，babel-polyfill能够转换新的api 10. postcss-loader：编写css的样式时，postcss-loader会自动帮我们加上兼容不同浏览器的前缀，比如-webkit 11. sass-loader:加载sass/scss文件并且编译成css文件 12. less-loader：加载less文件并且编译成css文件 13. mini-css-extract-plugin: 将css提取为独立的文件 14. optimize-css-assets-webpack-plugin：用于优化压缩css资源，它会在webpack构建时找到css资源，并且优化压缩 15. clean-webpack-plugin：每次构建代码的时候清理之前的/dist文件夹，也可以清楚一些日志 16. html-loader：在html中去加载另一个html文件 17. html-minify-loader：压缩html文件 PS：上述文章内容还有不明白的小伙伴可以留言，我看到后会回复的，上面讲到的抽象语法树由于比较大，这里就没有详细讲解，如果大家感兴趣的话可以留言，我后面会单独讲解《ast语法树》