webpack-loader(加载器)
加载器是用于资源文件的转换。 加载器就是以资源文件作为入参并返回新的资源的函数(在Node.js中运行)。
例子
例如,您可以使用加载器告诉webpack加载CSS文件或TypeScript文件,并将之转换为JavaScript。 首先,安装相应的加载器:
npm install --save-dev css-loader
npm install --save-dev ts-loader
其次,在你的webpack.config.js
中配置匹配每个.css
文件,并运用css-loader
生成js资源,同理对.ts
文件, 运用ts-loader`:
webpack.config.js
module.exports = {module: {rules: [{test: /\.css$/, use: ['css-loader'](/loaders/css-loader)}, {test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)} ] } };
注意,根据配置选项,应以以下规范使用相同的装载器:
{test: /.css$/, loader: 'css-loader'}
// or equivalently
{test: /.css$/, use: 'css-loader'}
// or equivalently
{test: /.css$/, use: {
loader: 'css-loader',
options: {}
}}
配置
有三种方式在你的应用中使用加载器:
- 通过配置
- 在
require
语句中显式引入 - 通过 CLI
通过 webpack.config.js
配置
module.rules
允许您在webpack配置中指定多个加载器。
这是一个简便的方式来配置加载器,并有助于你总览应用中每个加载器。
module: {rules: [{test: /\.css$/,use: [{ loader: 'style-loader'},{loader: 'css-loader', options: { modules: true } } ] } ] }
通过 require
配置
通常指在 require
语句(或者 define
, require.ensure
, 等)中配置加载器。使用!
将资源中的加载器分开, 每个部分相对于当前目录解析。
require('style-loader!css-loader?modules!./styles.css');
可以通过用整个规则前缀!
覆盖配置中的任何加载器 .
可以使用查询参数传递选项, 就好像如web(?key=value&foo=bar
)中一样。也可以使用JSON对象(?{"key":"value","foo":"bar"}
).
使用
module.rules
只要有可能,因为这将减少你的源代码中的样板,并允许你调试,并且定位加载器出现问题更快。
通过CLI配置
或者,你也可以通过CLI安装加载器 :
webpack --module-bind jade --module-bind 'css=style!css'
上述脚本为.jade
文件配置了 jade-loader
加载器, 以及为css文件配置了 style-loader
和 css-loader
加载器.
加载器特性
- 加载器是可以被串联的。就好像是个资源的管道(正如gulp的管道一样)。webpack会按时间顺序编译加载器链。 加载器链中的第一个加载器会将值作为给下一个加载器的输入。 在结束时,webpack最后返回JavaScript资源。
- 加载器可以是同步或异步的。
- 加载器在Node.js中运行,并且可以执行所有可能的操作。
- 加载器接受查询参数。 这可以用于将配置传递给加载器。
- 加载器也可以配置一个
options
对象。 - Normal modules can export a loader in addition to the normal
main
viapackage.json
with theloader
field. - 插件可以给加载器提供更多特性.
- 加载器可以产生任何其他的文件.
装载器通过预处理JavaScript环境,提供更多的功能。
functions (loaders).用户现在有更多的灵活性来实现细粒度的逻辑,如压缩,包装,语言翻译以及更多...。
获得加载器
加载器符合标准模块协议。大多数情况下,你会从模块路径 下获得你的加载器 (比如npm install
, node_modules
).
如何编写加载器? 一个加载器模块需要用Node.js兼容的JavaScript编写一个可以export的方法。 在通常情况下,你用npm管理加载器,但你也可以在你的应用程序中直接使用js文件编写的加载器。
按照惯例, 加载器通常被命名为 XXX-loader
, XXX
就是场下文的名字,比如说 json-loader
.
加载器名称约定和优先搜索顺序由由webpack配置API中的resolveLoader.moduleTemplates
定义。
转载于:https://www.cnblogs.com/CaseyWei/p/9593775.html
webpack-loader(加载器)相关推荐
- webpack中loader加载器(打包非js模块)
通过loader打包非js模块 我这儿用VScode为编辑器 在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结 尾的模块,webpack 默认处理不了, ...
- 需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改 比如我们在初识web ...
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- webpack使用加载器来加载CSS样式
前言: 对于webpack来说,每个文件都是一个模块,比如css.js.html.jpg等. 对于不同的模块,就得需要不同的加载器(Loaders)来处理,所以加载器是webpack最重要的功能. 安 ...
- 一文学会Webpack实用功能|加载器篇
Webpack 资源模块加载 通过探索我们知道可以把css文件作为打包的入口,不过webpack的打包入口一般还是JavaScript, 因为他的打包入口从某种程度来说可以算是我们应用的运行入口. 而 ...
- Webpack的加载器
一.什么是加载器(loaders) loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loa ...
- webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀 前言 在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
- 034_webpack中的加载器
1. 通过loader打包非js模块 1.1. 在实际开发中, webpack默认只能打包处理以.js后缀名结尾的模块, 其它非.js后缀名结尾的模块, webpack默认处理不了, 需要调用load ...
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- js css加载器,webpack的CSS加载器的使用
什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webp ...
最新文章
- 第五课.高斯判别分析
- 百度腾讯齐刷刷强调“产业+AI”,李彦宏看深,马化腾见远
- python ffmpeg4 保存h264
- 八数码 poj 1077 广搜 A* IDA*
- (Mybatis)缓存
- java多个页面爬取_java爬取html页面(简易通用版)
- 关于README的内容
- 猥琐思路复现Spring WebFlow远程代码执行
- 集成融云 即时通讯总结
- Win11怎么关闭开机自启动软件
- 网络安全学习路线是怎样的?
- Pom文件配置参数详解
- @Vaild,@Validated,@NotNull,@NotBlank,@NotEmpty史上最全用法以及各种踩坑细节
- PS进阶篇——如何PS软件给衣服换个颜色或图案风格(七)
- 8. 关于打分函数F1分数 TPR PPV等
- 键盘按键F1-F12失效的解决办法(ArchLinux)
- (银行简单的管理系统)java实训小型应用开发——数据库,GUI、客服端
- eclipse中安装Subclipse插件
- 2021-11-20 任务一:健康评估功能的展示
- asp心得感受_半年多来自学ASP的几点体会……
热门文章
- QT每日一练day10:设计一个登陆界面
- C++之static关键字探究
- java 最大线程数_JVM可生产的最大线程数 Thread 数量
- ubuntu中mysql怎么退出命令_Ubuntu中mysql启动和关闭
- java跳_用Java实现跳表
- python和财务管理的区别与联系_会计管理与财务管理区别与联系
- iis ajax访问html,为什么Ajax脚本不在IIS 7.5 Win 2008 R2服务器上运行?
- python实现链表的删除_干货||链表的技巧和算法总结
- mysql控制台导出查询结果_MySQL 命令行导出、导入Select 查询结果
- html绘制流程图飞线,基于jsplumb绘制流程图