VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • webpack4之如何编写loader的方法步骤

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

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

    1.编写入门级loader

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

    首先初始化一个项目

    npm init

    然后安装依赖

    cnpm install -D webpack webpack-cli

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

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

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

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

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

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

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

    2.给loader配置参数

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

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

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

    cnpm install --save-dev loader-utils

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

    3.this.callback

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

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

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

    4. this.async

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

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

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

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

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • webpack使用 babel-loader 转换 ES6代码示例
    • 详解Webpack loader 之 file-loader
    • webpack源码之loader机制详解
    • Webpack 之 babel-loader文件预处理器详解
    • webpack3之loader全解析
    • 详解webpack进阶之loader篇
    • 详解webpack loader和plugin编写
    • 详解webpack自定义loader初探
    • webpack file-loader和url-loader的区别

    广而告之:
    热门推荐:
    mysql 5.7.21 winx64安装配置方法图文教程

    本文针对安装mysql5.7.21的笔记进行了总结,分享给大家 1、将下载好的mysql压缩包解压到安装目录下 2、新建文件 my.ini,放置到mysql安装目录下,内容如下: [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 #···

    thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)

    复制代码 代码如下:<?php //thinkphp 路由定义规则  $route = array(  'news/:action/:year\d/:month/:day'=>'news/read?year=:2&month=:3&day=:4',    'news/:action^delete|update|insert/:year\d/:month/:day'···

    php+mysql开发中的经验与常识小结

    本文总结了php+mysql开发中的经验与常识。分享给大家供大家参考,具体如下: 一、基础规范 (1)尽量使用 InnoDB 存储引擎 支持事务、行级锁、并发性能更好,CPU 及内存缓存页优化得当,资源利用率更高 (2)必须使用 UTF8 字符集 无需转码,无乱码风险 (3)数据表、数据字段···

    Vue.js最佳实践(五招助你成为vuejs大师)

    本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招···

    Vue infinite update loop的问题解决

    一个尤大大曾回复过的问题 vue warn : You may have an infinite update loop in a component render function 最近再写一个数组渲染时,源数据是拿到的数组经过排序后的数组,正常运行却出现爆红: 报红代码: computed: { ...mapState({ fromNames (state) { let fromN···

    织梦dedecms编辑文章不更新时间的方法

    在修改文章的时候,发现织梦DEDECMS5.7这个版本存在一个问题,修改文章的同时也修改了文章的发布时间,这个 功能可能有些人比较需要,但同时也有些站长朋友又不需要,因为我们编辑某个文章的时候,发现编辑之后网站 的排序都变了。所以上网查了一下资料,也···

    使用PHP导出Redis数据到另一个Redis中的代码

    从某个 Redis db 导出数据到另一个 Redis db 的PHP脚本:复制代码 代码如下:$from = '127.0.0.1:6200/6';$to   = '127.0.0.1:6200/8'; $from_redis = redis_init($from);$to_redis   = redis_init($to); $keys  = $from_redis->keys('*');$c···

    帝国CMS分页之内容叶分页效果

    很多新手做网页,不知道怎样做分页。现在分享一下我做帝国CMS分页之内容叶分页效果的经验,希望能给大家带来一些帮助,减少一些迷茫. <一>、 样式表: /*分页样式2*/ .endPageNum{ padding:10px 12px 6px; clear:both; } .endPageNum .s0{width:28px;} .endPageNum .s1{w···

    详解JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。 这篇文章不做深入研究,只把···

    在PWS上安装PHP4.0正式版

    1、您可以从Windows 98的安装盘的add-ons\pws\setup.exe中安装Personal Web Server,选典型安装就可以了,使用缺省安装目录C:\Inetpub\wwwroot;2、软件下载:       http://www.php.net/distributions/php-4.0.0-Win32.zip3、用WinZI···