先来了解一下Loader,webpack是属于模块化方案,他能让任意类型的文件都能运行在浏览器中,怎么做到呢?这时就有了loader

定义: loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。

没太明白? 看下示例可能更清淅

常用的loader

这里其实没什么太大意义,无非是去看看自己项目到底用了哪些loader而已, 下面简单列出一些

  • style-loader 将css添加到DOM的内联样式标签style里

  • css-loader 允许将css文件通过require的方式引入,并返回css代码

  • less-loader 处理less

  • sass-loader 处理sass

  • postcss-loader 用postcss来处理CSS

  • autoprefixer-loader 处理CSS3属性前缀,已被弃用,建议直接使用postcss

  • file-loader 分发文件到output目录并返回相对路径

  • url-loader 和file-loader类似,但是当文件小于设定的limit时可以返回一个Data Url

  • html-minify-loader 压缩HTML

  • babel-loader 用babel来转换ES6文件到ES5

loader特性

我们一边偏向于使用,不会去在意loader的一些小细节, 这里就顺带说一下

  • loader 从右到左地取值(evaluate)/执行(execute)

  • loader 支持链式传递,链中的每个 loader 会将转换应用在已处理过的资源上

  • loader 也可以内联显示指定

  • loader 可以是同步的,也可以是异步的

  • loader 运行在 Node.js 中,并且能够执行任何 Node.js 能做到的操作

  • loader 可以通过 options 对象配置

  • 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader,还可以在 module.rules 中使用 loader 字段直接引用一个模块

  • loader 能够产生额外的任意文件

看了其特性后,再看来一组简单的demo进行加深印象

总结

  • loader是webpack核心,用于对模块的源代码进行转换

  • loader支持链式调用,从右至左执行,支持同步或异步函数

Webpack有哪些常见的Loader?他们是解决什么问题的?的更多相关文章

  1. 分享.net常见的内存泄露及解决方法

    分享.net常见的内存泄露及解决方法 关于内存泄漏的问题,之前也为大家介绍过,比如:<C++中内存泄漏的检测方法介绍>,是关于C++内存泄漏的.今天为大家介绍的是关于.NET内存泄漏的问题 ...

  2. Nginx常见错误与问题之解决方法技术指南

      Nginx常见错误与问题之解决方法技术指南. 安装环境: 系统环境:redhat enterprise 6.5 64bit 1.Nginx 常见启动错误 有的时候初次安装nginx的时候会报这样的 ...

  3. C#不用union,而是有更好的方式实现 .net自定义错误页面实现 .net自定义错误页面实现升级篇 .net捕捉全局未处理异常的3种方式 一款很不错的FLASH时种插件 关于c#中委托使用小结 WEB网站常见受攻击方式及解决办法 判断URL是否存在 提升高并发量服务器性能解决思路

    C#不用union,而是有更好的方式实现   用过C/C++的人都知道有个union,特别好用,似乎char数组到short,int,float等的转换无所不能,也确实是能,并且用起来十分方便.那C# ...

  4. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  5. Webpack探索【3】--- loader详解

    本文主要说明Webpack的loader相关内容.

  6. webpack——entry,output,plugins,loader,chunk知识

    entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...

  7. webpack的像素转vw loader插件

    这是一款针对webpack的像素转vw单位的loader插件. 笔者公司中,h5 rem的开发方案目前已经渐渐开始转向vw方案,因此本工具应运而生. 目前所制作的h5,大部分设计稿分辨率都是750的宽 ...

  8. webpack导入css及各项loader

    1. webpack导入css 1) 下载相关的加载器 npm install style-loader css-loader -D 2)将index.css引入到mian.js中 import '. ...

  9. webpack+vuecli打包常见的2个坑

    第一个坑: 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的.但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...

随机推荐

  1. JavaScript设计模式,单例模式!

    单例设计模式:保证一个类仅有一个实例,并且提供一个访问它的全局访问点.有些对象只需要一个,这时可用单例模式. 传统的单例模式 和new 创建对象的调用不一样 调用者要调用xxx.getInstance ...

  2. 容器之分类与各种测试(四)——multiset

    multiset是可重复关键字的关联式容器,其与序列式容器相比最大的优势在于其查找效率相当高.(牺牲空间换取时间段) 例程 #include<stdexcept> #include< ...

  3. Shell学习(二)——变量和基本数据类型

    参考博客: [1]LinuxShell脚本--变量和数据类型 [2]shell只读变量删除 一.变量 定义变量的语法 定义变量时,变量名和变量值之间使用"="分隔,并且等号两边不能 ...

  4. LeetCode1579题——圆圈中最后剩下的数字

    1.题目描述:0,1,,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字.例如,0.1.2.3.4这5个数字组成一个圆圈,从数字0开始每次删 ...

  5. 4.1 python中调用rust程序

    概述 使用rust-cpython将rust程序做为python模块调用: 通常为了提高python的性能: 参考 https://github.com/dgrunwald/rust-cpython ...

  6. Output of C++ Program | Set 3

    Predict the output of below C++ programs. Question 1 1 #include<iostream> 2 using namespace st ...

  7. DOM解析xml学习笔记

    一.dom解析xml的优缺点 由于DOM的解析方式是将整个xml文件加载到内存中,转化为DOM树,因此程序可以访问DOM树的任何数据. 优点:灵活性强,速度快. 缺点:如果xml文件比较大比较复杂会占 ...

  8. git 使用https方式进行 pull、push代码免密

    由于网络原因我用ssh方法拉取代码每次都提示远程服务连接失败,因此我用了https方式去拉去代码. 这种方式拉取代码每次操作都要输入密码,为了解决这个问题做了一下操作: 在命令行输入 git conf ...

  9. 关于python中的随机种子——random_state

    random_state是一个随机种子,是在任意带有随机性的类或函数里作为参数来控制随机模式.当random_state取某一个值时,也就确定了一种规则. random_state可以用于很多函数,我 ...

  10. Identity Server 4 从入门到落地(九)—— 客户端User和Role的解析

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...