Webpack基础之加载器

加载器(Loaders):

loader 是对应用程序中资源文件进行转换。它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件

示例:

例如,你可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转为 JavaScript。首先,安装相对应的 loader
这里写图片描述

其次,配置 webpack.config.js,对每个 .css 文件使用 css-loader,然后类似地,对每个 .ts 文件使用 ts-loader
这里写图片描述

配置:

在你的应用程序中,有三种方式使用 loader:
- 通过配置
- 在 require 语句中显示使用
- 通过 CLI

通过 webpack.config.js:

module.rules 允许你在 webpack 配置中指定几个 loader
这是展示 loader 的一种简明的方式,并且有助于简洁代码,以及对每个相应的 loader 有一个完整的概述
这里写图片描述

通过 require:

可以在 require 语句(或 define, require.ensure, 等语句)中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析
这里写图片描述
通过前置所有规则及使用 !,可以对应覆盖到配置中的任意 loader

可以给每个loader选项传递查询参数,就像在 web 中那样(?key=value&foo=bar)。也可以使用 JSON 对象(?{"key":"value","foo":"bar"})

通过 CLI:

可选项,你也可以通过 CLI 使用 loader
这里写图片描述
这会对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loader 和 css-loader

Loader 特性:

  • loader 支持链式传递。能够对资源使用流水线(pipeline)。loader 链式地按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader,返回 webpack 所预期的 JavaScript
  • loader 可以是同步或异步函数
  • loader 运行在 Node.js 中,并且能够执行任何可能的操作
  • loader 接收查询参数。用于 loader 间传递配置
  • loader 也能够使用 options 对象进行配置
  • 除了使用 package.json 常见的 main 属性,还可以将普通的 npm 模块导出为 loader,做法是在 package.json 里定义一个 loader 字段
  • 插件(plugin)可以为 loader 带来更多特性
  • loader 能够产生额外的任意文件

解析 Loader:

loader 遵循标准的模块解析。多数情况下,loader 将从模块路径(通常将模块路径认为是 npm install, node_modules)解析

如何编写模块?loader 模块需要导出为一个函数,并且使用 Node.js 兼容的 JavaScript 编写。在通常情况下,你会使用 npm 来管理 loader,但是你也可以将 loader 模块作为应用程序中的文件。

按照约定,loader 通常被命名为 XXX-loader,其中 XXX 是上下文的名称,例如 json-loader。

loader 的名称约定和优先搜索顺序,由 webpack 配置 API 中的 resolveLoader.moduleTemplates 定义。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407641.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

历届试题 兰顿蚂蚁

http://lx.lanqiao.org/problem.page?gpidT125 历届试题 兰顿蚂蚁 时间限制:1.0s 内存限制:256.0MB问题描述兰顿蚂蚁,是于1986年,由克里斯兰顿提出来的,属于细胞自动机的一种。平面上的正方形格子被填上黑色或白色…

【转】基于XML-RPC的BloggerAPI学习

Luliang的mail2blog脚本,通过基于XML-RPC的BloggerAPI来实现的发布blog的功能。BloggerAPI是一套程序接口,用以支持远程操作blog.这个规范现在的版本是1.0,是个试验版本和α版本。但是,规范的研发人员不再对BloggerAPI进一步地开发…

Webpack基础之插件

插件(Plugins): 插件是 wepback 的支柱功能。在你使用 webpack 配置时,webpack 自身也构建于同样的插件系统上! 插件目的在于解决 loader 无法实现的其他事 剖析: webpack 插件是一个具有 apply 属性的 JavaScript 对象。 app…

Flex布局实战篇

网格布局: 1.基本网格布局: 最简单的网格布局,就是平均分布。在容器里面平均分配空间,只是需要设置项目的自动缩放 HTML代码如下 CSS代码如下 因为每个网格都已经设置好了固定的百分比空间,唯一要做的就是给…

javascript学习系列(2):数组中的filter方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

写JQuery 插件 什么?你还不会写JQuery 插件

http://www.cnblogs.com/Leo_wl/p/3409083.html 前言   如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都知道。今天我们来讨论下jquery的插件…

stylus之选择器(Selectors)

选择器(Selectors): 缩排: Stylus的空格有重要的意义,我们使用缩排和凹排代替花括号”{“以及”}” 上面代码就对应于 如果你喜欢,你可以把冒号加上,用做分隔,便于阅读 规则集: Stylus就跟CSS一…

委托模型和事件模型 [C#]

1. 多播委托与委托有关的语法&#xff1a; 定义委托&#xff1a;<modifiers> delegate <return_type> <delegate_name> (<argument_list>)public delegate void Message() ;创建委托实例&#xff1a;<delegate_type> <name> new <d…

javascript学习系列(3):数组中的foreach方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

stylus之变量(Variables)

变量(Variables)&#xff1a; 变量&#xff1a; 我们可以指定表达式为变量&#xff0c;然后在我们的样式中贯穿使用 编译为 变量甚至可以组成一个表达式列表 标识符&#xff08;变量名&#xff0c;函数等&#xff09;&#xff0c;也可能包括$字符 属性查找&#…

你还不会ant design中的拖拽table实现吗

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 微信公众号关注小歌谣 前言 首先刚开始知道要书写一个这样的功能我的内心是比…

Sharepoint的文档库用资源管理器方式浏览报错“Explorer View ”解决方案。

最近在安装Wss3.0时候&#xff0c;在拷贝已存在资料到客户电脑上时&#xff0c;打开客户的文档库的资源管理器的时候&#xff0c;提示Explorer view 错误&#xff0c;而且客户端访问的时候也报错。 在经过N多的查询和搜索之后终于找到的了解决方法。原来如此http://207.46.19.1…

stylus之插值(Interpolation)

插值(Interpolation)&#xff1a; 插值&#xff1a; Stylus支持通过使用{}字符包围表达式来插入值&#xff0c;其会变成标识符的一部分。例如&#xff0c;-webkit-{‘border’ ‘-radius’}等同于-webkit-border-radius 比较好的例子就是私有前缀属性扩展 变身 选择器…

iOS 两个tableview的 瀑布流

iOS 两个tableview的 瀑布流1. [代码]Objective-C //// DocViewController.m// getrightbutton//// Created by 隋文涛 on 12-12-9.// Copyright (c) 2012年 隋文涛. All rights reserved.//#import "DocViewController.h"#define heightofimage(image) imag…

javascript学习系列(4):数组中的some方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说s…

stylus之运算符(Operators)

运算符(Operators): 运算符优先级: 下表运算符优先级&#xff0c;从最高到最低 一元运算符: 以下一元运算符可用”!”,”not”,”-“,””以及”~” 逻辑运算符not的优先级较低&#xff0c;因此&#xff0c;下面这个例子可以替换 用 二元运算符: 下标运算符[]允…

javascript学习系列(5):数组中的reduce方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…

oracle数据导入sqlldr小例子

表结构&#xff1a;emp Sql代码 create table EMP ( empno NUMBER(4) not null, ename VARCHAR2(10), job VARCHAR2(9), mgr NUMBER(4), hiredate DATE, sal NUMBER(7,2), comm NUMBER(7,2), deptno NUMBER(2) …

stylus之混合书写(Mixins)

混合书写(Mixins) Mixins&#xff1a;Mixins是预处器中的函数。平时你在写样式时某段CSS样式要经常重复性的用到多个元素中&#xff0c;这样你就需要重复的写多次。在CSS预处器中&#xff0c;你可以为这些公用的CSS样式定义一个Mixin&#xff0c;然后在你CSS需要使用这些样式的…

javascript学习系列(6):数组中的pop等方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…