webpack自定义loader和插件的api网址:https://www.webpackjs.com/api/loaders/

点击顶部API,看左侧api:

1. 如何编写一个loader

实现的功能是:把js代码中的lee改成dellLee

this.query 获取options的name;

--------

如果loader中有异步:

这里注意

1:使用this.async() 告诉有异步代码;

2:把异步返回的result放在callback中;

3:loader-utils 是一个npm i loader-utils -D 安装的插件,便于获取webpack.config.js 中配置loader的options;

4: 其中callback也是一个api,可以传入四个参数,

一个可以同步或者异步调用的可以返回多个结果的函数。预期的参数是:

this.callback(
err: Error | null,
content: string | Buffer,
sourceMap?: SourceMap,
meta?: any
);
  1. 第一个参数必须是 Error 或者 null
  2. 第二个参数是一个 string 或者 Buffer
  3. 可选的:第三个参数必须是一个可以被这个模块解析的 source map。
  4. 可选的:第四个选项,会被 webpack 忽略,可以是任何东西(例如一些元数据)

-------------

配置文件中简化路径:

使用resolveLoader可以配置loader的路径;先去 node_modules中找,再去./loaders文件夹中找

========================

webpack 插件的编写:

-----

https://www.webpackjs.com/api/compiler-hooks/#emit

class CopyrightWebpackPlugin{
apply(compiler){ //compiler是webpack配置的实例,compilation是本次打包的实例
compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation,cd)){
console.log(1212);
// compilation.assets 中存放的是本次打包生成的文件信息
compilation.assets['copyright.txt'] = { //在生成的文件数组中增加新的txt文件
source:function(){ //source 表示内容
return 'copyright by dell lee';
},
size:function(){
return 21; //表示文件大小21个字符长度
}
}
cd(); //使用了异步函数 tabAsync ,一定要在这里用cd回调函数
}
}
}

插件是一个类,最后打包生成两个文件

------------

下面看一个同步的时刻:

class CopyrightWebpackPlugin{
apply(compiler){
compiler.hooks.compile.tap('CopyrightWebpackPlugin',(compilation)){ //同步的不用传回调函数cd
console.log('hello');
}
}
}

通过在代码中增加 debugger 进行调试,并且在控制台查看相应的变量:

webpack loader和插件的编写原理的更多相关文章

  1. 揭秘webpack loader

    前言 Loader(加载器) 是 webpack 的核心之一.它用于将不同类型的文件转换为 webpack 可识别的模块.本文将尝试深入探索 webpack 中的 loader,揭秘它的工作原理,以及 ...

  2. webpack进阶之插件篇

    一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...

  3. webpack常用的插件安装命令

    webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...

  4. 手把手教你撸一个 Webpack Loader

    文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 经常逛 webpack 官网的同学应该会很眼熟上面的图.正如它宣传的一样,webpack 能把左侧各种类型的文件(webpa ...

  5. vue+webpack 安装常见插件

    html-webpack-plugin 插件地址:https://www.npmjs.com/package...安装指令: npm install html-webpack-plugin --sav ...

  6. Unity中的 原生插件/平台交互 原理

    http://blog.csdn.net/u010019717/article/details/78451660 声明:  内容摘录自:  http://gad.qq.com/article/deta ...

  7. webpack.config.js====插件html-webpack-plugin

    1. 安装 cnpm install html-webpack-plugin --save-dev 2. webpack.config.js中使用 const htmlWebpackPlugin = ...

  8. 关于nagios系统下使用shell脚本自定义监控插件的编写以及没有实时监控图的问题

    关于nagios系统下shell自定义监控插件的编写.脚本规范以及没有实时监控图的问题的解决办法 在自已编写监控插件之前我们首先需要对nagios监控原理有一定的了解 Nagios的功能是监控服务和主 ...

  9. webpack常用的插件

    webpack常用的开发插件 1.clean-webpack-plugin 运行webpack build时先把打包进入的文件夹清空 注意,它是以对象的方式去接收的 const { CleanWebp ...

随机推荐

  1. web基础---->session的使用

    前几天在博问中,看到有人提到了有关session的问题,决定自己整理写一下有关session的原理!说起session,cookie必须是要谈的! 目录 Cookie的介绍 Cookie的使用 Ses ...

  2. springboot2 配置 https

    package cn.xiaojf.aibus.configure; import org.apache.catalina.Context; import org.apache.catalina.co ...

  3. win10安装网络适配器

    上面这个有些叫Microsoft Loopback Adapter

  4. 用vue实现列表分页和按钮操作

    为中华之崛起而读书 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. 10 Spring框架--基于注解和xml的配置的应用案例

    1.项目结构 2.基于xml配置的项目 <1>账户的业务层接口及其实现类 IAccountService.java package lucky.service; import lucky. ...

  6. 对于并发任务,应该使用 Task 替代 BackgroundWorker

    背景 EF + Oracle,并发存储监控记录,使用 BackgroundWorker 时产生错误如下: public void MonitorLogging(DateTime DateStart, ...

  7. vue封装一个简单的div框选时间的组件

    记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...

  8. const指针和指向常量的指针

    先看下面六种写法: . const int p; . const int *p; . int const* p; . int * const p; . const int * const p; . i ...

  9. zap+日志分级分文件+按时间切割日志整合demo

    实现功能     info debug 级别的日志输出到 /path/log/demo.log     warn error .... 级别的日志输出到 /path/log/demo_error.lo ...

  10. Pycharm安装文档教程

    1 找到安装包 双击 2 3 可以更改安装路径 4 5 6 7 等待安装完成 8 作者:含笑半步颠√ 博客链接:https://www.cnblogs.com/lixy-88428977 声明:本文为 ...