常见 loader 和 plugin 有哪些？二者的区别是什么？

常见loader:

1. babel-loader 把 JS/TS 变成 JS。
2. ts-loader 把 TS 变成 JS，并提示类型错误。
3. markdown-loader 把 Markdown 变成 HTML。
4. html-loader 把 HTML 变成 JS 字符串。
5. sass-loader 把 SASS/SCSS 变成 CSS。
6. css-loader 把 CSS 变成 JS 字符串。
7. style-loader 把 JS 字符串变成 style 标签。
8. postcss-loader 把 CSS 变成更优化的 CSS。
9. vue-loader 把单文件组件（SFC）变成 JS 模块。
10. thread-loader 用于多进程打包。

常见plugin:

1. html-webpack-plugin 用于创建 HTML 页面并自动引入 JS 和 CSS 。
2. clean-webpack-plugin 用于清理之前打包的残余文件。
3. mini-css-extract-plugin 用于将 JS 中的 CSS 抽离成单独的 CSS文件。
4. SplitChunksPlugin 用于代码分包（Code Split）。
5. DLLPlugin + DLLReferencePlugin 用于避免大依赖被频繁重新打包，大幅降低打包时间。
6. eslint-webpack-plugin 用于检查代码中的错误。
7. DefinePlugin 用于在webpack config里添加全局变量。
8. copy-webpack-plugin 用于拷贝静态文件到dist。

二者的区别：

• loader是文件加载器

  • 功能：能够对文件进行编译、优化、混淆（压缩）等，比如babel-loader/vue-loader。
  • 运行时机：在创建最终产物之前运行。

• plugin是webpack插件

  • 功能：能实现更多功能，比如自定义全局变量、Code Split、加速编译等。
  • 运行时机：在整个打包过程（以及前后）都能运行。

参考资料：Loaders | webpack、 Plugins | webpack