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,一经查实,立即删除!

相关文章

移动端实现hover效果

document.body.addEventListener(‘touchstart’, function(){ });加上这行代码,空函数就行 然后:hover改成:active,实现PC端hover效果

历届试题 兰顿蚂蚁

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

Taro+react开发(26)taro基本骨架

import Taro, { Component } from "tarojs/taro";class companyTitle extends Component {state {geyao: "1111"};render() {return <div>11111</div>;} }export default companyTitle;

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

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

前端技巧——js篇

前端技巧——js篇 复制操作 copy () {let url this.code;let oInput document.createElement(input);oInput.value url;document.body.appendChild(oInput);oInput.select(); // 选择对象console.log(oINput.value);document.execCommand(Cooy); // 执行浏览器复制命令a…

Webpack基础之插件

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

Taro+react开发(27)别加view

return (<div><View>11111</View><ImageclassName"unit-info-tax-tip"src{require("./companyTitle/system-item1.png")}/></div>

使用windows资源管理器打开jar

在命令行里输入&#xff1a; assoc .jarCompressedFolder转载于:https://www.cnblogs.com/pavkoo/p/3805456.html

MYSQL进入客户端后切换服务器的简单做法试验

今天发现有个\r 选项可以切换连接。不过功能比较单一。connect (\r) Reconnect to the server. Optional arguments are db and host.进入客户端后切换服务器连接的做法。只能是切换到和另外一个SERVER端口&#xff0c;用户名&#xff0c;密码都是一样的。原来SERVER&#xf…

dos下登录fedora下的vsftp失败

我有两个FTP站点&#xff1a;A - windows xp下的IIS, B - 虚拟机fedora12下的vsftp&#xff0c;都是正常运行的&#xff0c;同时这两个站点都允许匿名访问。 在dos下访问A&#xff0c;或在fedora12终端下登录B&#xff0c;都是成功的。但是在dos下访问B&#xff0c;或在fedora…

Flex布局实战篇

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

[Python]linux自己定义Python脚本命令

在window下写好的程序配置到Linux上&#xff0c;要实现随意文件夹下的命令调用。 因为初学Linux&#xff0c;这里从文件传输等最主要的方法入手&#xff0c;记录配置的过程中遇到的各种问题。 连接远端server 这里使用putty这个工具&#xff0c;用SSH方法连上远端server 传输文…

滑动图片验证以及滑块验证

1、图片验证longbow.slidercaptcha 包下载地址以及示例 https://github.com/Yephy/SliderCaptcha https://gitee.com/JayZhou/SliderCaptcha https://blog.csdn.net/tanqingfu1/article/details/105295158 2、滑块验证slideunlock 包下载地址以及示例 http://www.internetke.co…

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

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

asp.net)js 在当前日期上加一天和系统发布

今天一上班,网站前台的特价酒店页面中 日期显示错误.由于日期是在aspx页面中用js取得的.因此只要将页面的js函数修改一下就行.如下: function gotourl(){ var dayendnew Date(); //在如期dayend上加2天 dayenddayend.setDate(dayend.getDate()2); var enddayend.getFullYear()&…

grep搜索子目录中包含某字符串的特定文件

grep -n "str" -r ./这是查找当前目录下以及下辖子目录下所有包含str字符串的文件,会列出文件名.以及该行的内容.以及行号 ---------------------------------------------------------------------------------------------------------------------------比如&…

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

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

stylus之选择器(Selectors)

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

正则仅输入文字字母空格,但必须含有字母

/^(?!\d$)[\s\da-zA-Z]$/ 意为正则仅输入文字字母空格&#xff0c;但必须含有字母 (?!\d$) 正方向上查找“非至少一个数字结尾”处才开始匹配&#xff0c;且返回空。&#xff08;为什么是空&#xff0c;(?!\d$)前什么也没有写&#xff0c;等于即使满足正则的条件也不会得到任…

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

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