常见 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 变成 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. SplitChunkPlugin 用于代码分包(Code Split)
  5. DllPlugin +DllReferencePlugin 用于避免大依赖被频繁重新打包，答复降低打包时间
  6. eslint-webpack-plugin 用于检查代码中的错误
  7. DefinePlugin 用于在 webpack config 里添加全局变量
  8. copy-webpack-plugin 用于拷贝静态文件到 dist

更多请参考官方文档

plugin 和 loader 的区别

  1. loader 是文件加载器
    1. 功能：能够对文件进行编译、优化、混淆(压缩)等，比如 babel-loader / vue-loader
    2. 运行时机：在创建最终产物之前运行
  2. plugin 是 webpack 的插件
    1. 功能：能实现更多功能，比如定义全局变量、Code Split、加速编译等
    2. 运行时机：在整个打包过程（以及前后）都能运行