Skip to main content

常见 loader 和 plugin 有哪些？

常见 loader​

语法转换

  1. babel-loader 把 TS 变成 JS
  2. ts-loader 把 TS 变成 JS
  3. eslint-loader：通过 ESLint 检查 JavaScript 代码

类型转换

  1. html-loader 把 html 变成 JS 字符串
  2. image-loader 加载并且压缩图片文件

文件转换

  1. file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
  2. url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

样式转换

  1. sass-loader 把 SASS/SCSS 变成 CSS
  2. less-loader 把 Less 变成 CSS
  3. css-loader 把 CSS 变成 JS 字符串
  4. postcss-loader 优化 CSS
  5. style-loader 把 JS 字符串 变成 style 标签

在 webpack 文档里写了： Loaders | webpack

常见 plugin​

  1. html-webpack-plugin 用于创建 HTML 页面并自动引入 JS 和 CSS
  2. mini-css-extract-plugin 用于将 JS 中的 CSS 抽离成单独的 CSS 文件
  3. eslint-webpack-plugin 用于检查代码中的错误
  4. uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
  5. ExtractTextWebpackPlugin: 将所有的入口 chunk 中引用的.css，移动到独立分离的 CSS 文件
  6. commons-chunk-plugin：提取公共代码

也在 webpack 文档里写了：Plugins | webpack

二者的区别​

  • loader 是文件加载器

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

  • plugin 是 webpack 插件

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