vue项目常用的plugin和loader

plugin===========================

vue-clipboard2

vuex-persistedstate

clean-webpack-plugin

filemanager-webpack-plugin

html-webpack-plugin

uglifyjs-webpack-plugin

extract-text-webpack-plugin

optimize-css-assets-webpack-plugin

generate-asset-webpack-plugin

compression-webpack-plugin

terser-webpack-plugin

hard-source-webpack-plugin

  • 提升再次启动webpack的速度

happypack

  • 将文件解析任务分解成多个子进程并发执行，发挥多核 CPU 电脑的威力

loader============================

vue-loader

  • 处理.vue文件的加载器
  • 其他功能，如在<style> 的部分使用 Sass 和在 <template> 的部分使用 Pug（模板引擎）
  • https://vue-loader.vuejs.org/zh/

babel-loader

css-loader

file-loader

  • 引导webpack将引入的资源，生成文件并返回资源地址（返回的是文件的路径）
  • 把文件（img的src引用的图片路径或者background中引用的图片路径）输出到一个文件夹中，在代码中通过相对URL去引用输出的文件
  • 默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
  • 马上使用https://www.webpackjs.com/loaders/file-loader/

url-loader

  • 将小型资源（图片、音视频、字体文件）转为base64 URL 进行加载，减少http请求（返回的是文件的base64编码）
  • url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
  • url-loader内部封装了file-loader，文件小于limit值时，转为DataURL，文件大于limit时，会使用file-loader进行处理。

image-loader

  • 加载且压缩图片文件

sass-loader/less-loader

postcss-loader

cache-loader

  • 在一些性能开销较大的 loader 之前添加 cache-loader，能将结果缓存到磁盘里。保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用。
  • 会在 node_modules 目录下生成一个 .cache 目录缓存文件内容，且二次打包速度显著提升

thread-loader

  • 在单独的进程中，运行一些耗时的loader
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容