列举loader

1. babel-loader把高级JS转换为低级JS
2. ts-loader把TS转换为JS，并提示类型错误
3. markdown-loader把markdown变成html
4. html-loader把html变成js字符串
5. sass-loader把sass/less变成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 是文件夹加载器
  • 功能：对文件进行编译、优化、混淆等，比如 babe-loader / vue-loader
  • 运行实际：在创建最终产物之前运行
• plugin 是 webpack插件
  • 功能：能实现更多的功能，比如定义全局变量、Code split、加速编译等
  • 运行时机：在整个打包过程都能优化