webpack知识点整理

1、Webpack中loader的作用/ loader是什么？

Loader 是webpack中提供了一种处理多种文件格式的机制，因为webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理。

loader文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译压缩等

处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个先执行

常见的loader有哪些？

• less-loader:将less文件编译成css文件
• css-loader:将css文件变成commonjs模块加载到js中，模块内容是样式字符串
• style-loader: 创建style标签，将js中的样式资源插入标签内，并将标签添加到head中生效
• ts-loader: 打包编译Typescript文件

2、Plugin有什么作用？/Plugin是什么

Plugin功能更强大，主要目的就是解决loader 无法实现的事情，比如打包优化和代码压缩等。
Plugin加载后，在webpack构建的某个时间节点就会触发plugin定义的功能，帮助webpack做一些事情。实现对webpack的功能扩展。

常见的Plugin有哪些

1. html-webpack-plugin ：处理html资源，默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）
2. mini-css-extract-plugin： 打包过后的css在js文件里，该插件可以把css单独抽出来