webpack loader & plugin

https://webpack.js.org/concepts/loaders/

https://webpack.js.org/concepts/plugins/

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log('The webpack build process is starting!!!');
});
}
} module.exports = ConsoleLogOnBuildWebpackPlugin;


一、webpack的打包原理

识别入口文件

通过逐层识别模块依赖(Commonjs、amd或者es6的import,webpack都会对其进行分析,来获取代码的依赖)

webpack做的就是分析代码,转换代码,编译代码,输出代码

最终形成打包后的代码

二、什么是loader

loader是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中

处理一个文件可以使用多个loader,loader的执行顺序和配置中的顺序是相反的,即最后一个loader最先执行,第一个loader最后执行

第一个执行的loader接收源文件内容作为参数,其它loader接收前一个执行的loader的返回值作为参数,最后执行的loader会返回此模块的JavaScript源码

三、什么是plugin

在webpack运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结果。

四、loader和plugin的区别

对于loader,它是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将A.scss转换为A.css,单纯的文件转换过程

plugin是一个扩展器,它丰富了webpack本身,针对是loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,执行广泛的任务

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/308#issuecomment-583222450



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


webpack loader & pulgin的更多相关文章

  1. 怎样写一个webpack loader

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  2. 如何开发webpack loader

    关于webpack 作为近段时间风头正盛的打包工具,webpack基本占领了前端圈.相信你都不好意思说不知道webpack. 有兴趣的同学可以参考下我很早之前的webpack简介 . 确实webpac ...

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

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

  4. 案例实战之如何写一个webpack loader

    通过以下几个实例掌握webpack loader的写法 1.写一个多语言替换的loader 在index.js在页面上插入了一个{{title}}文本,我们需要在打包的时候将其替换成对应的多语言 fu ...

  5. 发布一个npm包(webpack loader)

    发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...

  6. webpack loader加载器

    配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd c ...

  7. [webpack]——loader配置

    前言 当我们需要配置 loader 时,都是在 module.rules 中添加新的配置项,在该字段中,每一项被视为一条匹配使用 loader 的规则. 看一下基础实例: module.exports ...

  8. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  9. webpack loader 生成虚拟文件的方案

    此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 使用 webpack 的时候,难免需要写一些 loader,接着就会遇到一个很纠结的问题.该 loade ...

随机推荐

  1. It is thread-safe and idempotent, but not reentrant.

    https://github.com/django/django/blob/master/django/apps/registry.py

  2. (转载)微软数据挖掘算法:Microsoft Naive Bayes 算法(3)

    介绍: Microsoft Naive Bayes 算法是一种基于贝叶斯定理的分类算法,可用于探索性和预测性建模. Naïve Bayes 名称中的 Naïve 一词派生自这样一个事实:该算法使用贝叶 ...

  3. windows10 中 svn 代码统计工具 StatSVN 使用详解

    1.下载TortoiseSVN 下载地址 ps:安装时务必选上命令行的svn命令. 2.下载StatSVN 官网地址 官网上目前时0.7.0版本,我的svn是1.12.0版本,运行时会报错: 所以建议 ...

  4. PL/SQL 学习分享

    PL SQL概述 什么是PLSQL PLSQL的特点 PLSQL的开发环境 PLSQL的工作原理 语句块重点部分 PLSQL声明命名规则 声明 命名规则 表达式和运算符 表达式的分类 运算符分类 流程 ...

  5. typedef void (*sighandler_t)(int);

    typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t handler); ---------- ...

  6. java日期

    // 完整显示日期时间 String str = (new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS")).format(new Date ...

  7. 25.sshd和scp

    1.配置sshd服务 想要使用 SSH 协议来远程管理Linux 系统,则需要部署配置sshd 服务程序.sshd 是基于SSH协议开发的一款远程管理服务程序.   sshd 服务的配置信息保存在/e ...

  8. 【STM32】PWM波中的时间问题

    我们使用的TIM3定时器是挂载在APB1总线上的,APB1总线的时钟频率为72MHz. APB1总线的时钟频率通过PSC寄存器预分频,得到的频率为(72/(71+1))=1MHz. 定时器的自动重装载 ...

  9. PTA甲级—STL使用

    1051 Pop Sequence (25分) [stack] 简答的栈模拟题,只要把过程想清楚就能做出来. 扫描到某个元素时候,假如比栈顶元素还大,说明包括其本身的在内的数字都应该入栈.将栈顶元素和 ...

  10. 2019牛客暑期多校训练营(第六场)D-Move

    >传送门< 题意: 你有n件行李,有k个箱子体积相同的箱子,遵循下面的规则将行李放进箱子里面 每次都取当前最大的可以放进箱子的行李放进箱子,如果该箱子放不进任何行李那么就换一个新的箱子再按 ...