webpack4之如何编写loader的方法步骤


Posted in Javascript onJune 06, 2019

之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。

这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。

1.编写入门级loader

我在之前的文章中,已经把webpack基础的内容基本上都过了一遍,现在开始准备复习更高级的webpack知识了,首先从loader开始。

首先初始化一个项目

npm init

然后安装依赖

cnpm install -D webpack webpack-cli

创建一个src目录,里面创建一个index.js

webpack4之如何编写loader的方法步骤

新建一个webpack.config.js,写入最基本的配置

webpack4之如何编写loader的方法步骤

如果此时,我们有个需求,中打包过程中,需要把world替换成mark,我们就可以借助loader来实现。首先在src同级目录新建一个loader文件夹,里面新建一个replaceLoader.js。

webpack4之如何编写loader的方法步骤

replaceLoader.js需要导出一个函数,注意:这个函数不能是箭头函数,因为webpack调用loader的时候会对this做一些变更,上面有一些方法,如果使用箭头函数,this指向就会有问题,没有办法调用this上的一些方法。

函数可以接受一个参数,参数是我们源代码的内容,所以可以对source进行操作后,return source,就可以改变源代码了。

webpack4之如何编写loader的方法步骤

然后使用我们自己写的loader,use就不填写loader名称了,需要写我们编写的loader的路径。

webpack4之如何编写loader的方法步骤

这样我们打包后发现,world已经被替换成mark了,这样我们就实现了一个最简单的loader。

2.给loader配置参数

loader中常常可以配置一些参数,那么我们如果想配置参数,要怎么做呢?

webpack4之如何编写loader的方法步骤

此时在replaceLoader中,可以通过this.query访问到参数。

webpack4之如何编写loader的方法步骤

webpack4之如何编写loader的方法步骤

webpack4之如何编写loader的方法步骤

这样打包后,结果就会替换成我们的参数,但是官方推荐我们使用loader-utils来传参。

cnpm install --save-dev loader-utils

webpack4之如何编写loader的方法步骤

这样打包的结果也是我们传入的参数。

3.this.callback

有时候我们不止要return一个resource,还可能要返回多个结果,就需要用到callback。

this.callback(
 err: Error | null,
 content: string | Buffer,
 sourceMap?: SourceMap,
 meta?: any
);

第一个参数是错误,第二个是结果,第三个是sourcemap,第四个可以是任何内容(比如元数据)

webpack4之如何编写loader的方法步骤

4. this.async

在loader中,如果我们直接调用setTimeout,就会报错,那么如果我们想进行异步操作要怎么做呢?

webpack4之如何编写loader的方法步骤

当要使用异步的时候,需要先把callback变为this.callback,然后再返回结果(和this.callback一样)。

这样再打包就不会有任何问题。

额外知识点:我们现在配置loader的时候,需要使用path.resolve,有没有什么方法可以像其他loader一样引用呢?

webpack4之如何编写loader的方法步骤

这样只写loader名称,webpack就会先到node_modules里面找,找不到就去当前目录下的loaders中去找。

webpack4之如何编写loader的方法步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
20个最新的jQuery插件
Jan 13 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
vue 插件的方法代码详解
Jun 06 #Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
node.js的http.createServer过程深入解析
Jun 06 #Javascript
vue中keep-alive组件的入门使用教程
Jun 06 #Javascript
vue2配置scss的方法步骤
Jun 06 #Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 #Javascript
详解Vue 如何监听Array的变化
Jun 06 #Javascript
You might like
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
js html实现计算器功能
2018/11/13 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
探亲邀请信范文
2014/01/30 职场文书
房地产活动策划方案
2014/05/14 职场文书
服装设计专业求职信
2014/06/16 职场文书
单位工作证明范文
2014/09/14 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
承诺保证书格式
2015/02/28 职场文书
2015年领班工作总结
2015/04/29 职场文书
超市主管竞聘书
2015/09/15 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python