常见loader

简介: 常见loader:

  1. 文件处理的loader
    • file-loader:当引入的文件是 .png.txt 等时,可以通过 file-loader 解析项目中的 url 引入。根据配置将文件拷贝到相应的路径,并修改打包后文件的引入路径,让它指向正确的文件。
    • url-loaderurl-loader 封装了 file-loader 且可以不依赖于 file-loader 单独使用,并且可以配置 limit。对小于 limit 大小的图片转换成 Base64,大于 limit 的时候使用 file-loader 里的方法。
  2. 语法检查的loader
    • tslint-loader:通过 TSLint 检查 TypeScript 代码
    • eslint-loader:通过 ESLint 检查 JavaScript 代码
  3. css处理loader
    • style-loader:动态创建 style 标签,将 CSS 代码插入到 head 中。
    • css-loader:负责处理 @importurl 等语句。例如 import css from 'file.css'url(image.png)
    • postcss-loader:负责进一步处理 CSS 文件,比如添加浏览器前缀,压缩 CSS 等
    • less-loader:将 .less 文件内容转换成 CSS。
    • sass-loader:将 .sass 文件内容转换成 CSS。
  4. JS 代码处理常见的 loader
    • babel-loader:将 JS 代码向低版本转换,我们需要使用 babel-loader
    • ts-loader:将 TypeScript 转换成 JavaScript
目录
相关文章
|
4月前
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
|
5月前
|
XML Java PHP
AS3 Loader与URLLoader的区别与比较
AS3 Loader与URLLoader的区别与比较
24 0
|
5月前
|
移动开发 监控 前端开发
plugin和loader
plugin和loader
29 0
|
9月前
|
前端开发
Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
221 0
|
11月前
|
缓存 前端开发 JavaScript
【前端】style-loader和MiniCssExtractPlugin.loader
【前端】style-loader和MiniCssExtractPlugin.loader
112 0
|
数据格式
写一个自定义loader,看完,就会
webpack的loader本质上是一个导出的函数,loader runner[1]会调用该函数,在loader函数内部,this的上下文指向是webpack,通常loader内部返回的是一个string或者Buffer。当前loader返回的结果,会传递给下一个执行的loader
292 0
写一个自定义loader,看完,就会
|
前端开发 开发者
loader - 配置处理 scss 文件的 loader|学习笔记
快速学习 loader - 配置处理 scss 文件的 loader
224 0
loader - 配置处理 scss 文件的 loader|学习笔记
|
前端开发 开发者
loader - 配置处理 less 文件的 loader| 学习笔记
快速学习 loader - 配置处理 less 文件的 loader
152 0
loader - 配置处理 less 文件的 loader| 学习笔记
|
前端开发 JavaScript 开发者
loader - 配置处理 css 样式表的第三方 loader| 学习笔记
快速学习 loader - 配置处理 css 样式表的第三方 loader
124 0
|
缓存 Rust 前端开发
60行代码实现一个基于esbuild按需加载的loader(一)
大家好,我是Fly, 最近研究的技术就是esbuild,一个新技术的 出现必然是解决是某些问题的, 这不我就打算用它来进行项目的编译速度进行操刀了, 前端对于tsx 的编译方式 无非是两种,
60行代码实现一个基于esbuild按需加载的loader(一)