常见 loader

• bable-loader 把高级 JS/TS 变成低级 JS
• ts-loader 把 TS 变成 JS，并提示类型错误
• markdown-loader 把 markdown 变成 html
• html-loader 把 html 变成 JS 字符串
• sass-loader 把 SASS/SCSS 变成 CSS
• css-loader 把 CSS 变成 JS 字符串
• style-loader 把 JS 字符串变成 style 标签
• postcss-loader 把 CSS 变成更优化的 CSS
• vue-loader 把单文件组件（SFC）变成 JS 模块
• thread-loader 用于多进程打包

常见 plugin

• html-webpack-plugin 用于创建 HTML 页面并自动引入 JS 和 CSS
• clean-webpack-plugin 用于清理之前打包的残余文件 （其实可以用 rm -rf）
• mini-css-extract-plugin 用于将 JS 中的 CSS 抽离成单独的 CSS 文件
• SpliteChunksPlugin 用于代码分包（Code Split）
• DllPlugin+DllReferencePlugin 用于避免大依赖被频繁重新打包，大幅降低打包时间
• eslint-webpack-plugin 用于检查代码中的错误
• DefinePlugin 用于在 webpack config 里添加全局变量
• copy-webpack-plugin 用于拷贝静态文件到 dist

二者的区别

• loader 是文件加载器

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

• plugin 是 webpack 插件

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