交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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的区别

    广而告之:
    热门推荐:
    DEDE5.6织梦5.7搜索结果按点击排序 最新可用代码

    相信大家对DEDE5.6 DEDE5.7的站内搜索非常失望吧,U盘量产网也一样,虽然已经优化了让搜索结果按标题匹配,但比如搜索“金士顿”的时候会出现非常多有金士顿关键字的文章,完全是按最新发布时间排序,也就是说最新发布的显示在最前面,问题来了,大家想要搜索的结···

    Jquery判断IE6等浏览器的代码

    Jquery判断IE6的代码: 复制代码 代码如下: if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { //代码 } jquery 判断浏览器方法 jquery中利用navigator.userAgent.indexOf来判断浏览器类型,并进行了一下处理,如果不想使用j···

    datatable行转列示例分享

    复制代码 代码如下: /// <summary>  /// DataTable行转列  /// </summary>  /// <param name="dtable">需要转换的表</param>  /// <param name="head">转换表表头对应旧表字段(小写)</param>  /// ···

    在VScode中创建你的代码模板的方法

    使用VScode的用户代码片段功能,来生成自己习惯的代码模板,提升开发效率 1.选择菜单里的 文件 > 首选项 > 用户代码片段 2.选择你需要自定义模板的文件,以vue为例 3. 配置对应文件json 把代码片段写在json里。每个代码段都是在一个代码片段名称下定义的,并且有prefi···

    PHP学习笔记 (1) 环境配置与代码调试

    一配置PHP环境 1、了解什么是PHP        PHP(“PHP: Hypertext Preprocessor”,超文本预处理器的字母缩写)     PHP,是英文超级文本预处理语言Hypertext Preprocessor的缩写。PHP 是一种 HTML 内嵌式的语言,是一种在服务器端执···

    js判断传入时间和当前时间大小实例(超简单)

    实例如下: //判断时间是否过期 function judgeTime(time){ var strtime = time.replace("/-/g", "/");//时间转换 //时间 var date1=new Date(strtime); //现在时间 var date2=new Date(); //判断时间是否过期 return date1<date2?true:false; } 以上这篇js判断传入时···

    js限制checkbox选中个数以限制六个为例

    今天在做项目时,碰到一个问题,我需要展示多个checkbox复选框,而只能允许最多选6个。调试了老半天,终于出来了,代码如下: <SCRIPT LANGUAGE="JavaScript"> var c=0,limit=6; function doCheck(obj) { obj.checked?c++:c--; if(c>limit){ obj.checked=···

    jquery attr 设定src中含有&(宏)符号问题的解决方法

    问题描述: html代码如下: <iframe src="//www.jb51.net" id="addOrUpdateIframe" style="width:870px;height:450px;" border="0" scrolling="yes" ></iframe> 我用 jquery 的attr 方法设定 iframe的src属性 $("#addOrUpdateIframe").attr("src", "http···

    JavaScript定义类或函数的几种方式小结

    提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细。我们看看JavaScript中定义类的各种方法。 1.工厂方式 java···

    HTML5 声明兼容IE的写法

    <!DOCTYPE html>是HTML5的声明,主流的游览器中只有IE8及以下版本不支持,这样IE会进入Quirks模式。但之后的声明可以强制指定IE的呈现模式,所以<!DOCTYPE html>声明对IE就无影响。 HTML5并没有XHTML那么严格,对于一般的xhtml页面,基本都不通完全通过W3C验证标···