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. http发送

    package cn.com.yitong.wdph.util; import java.io.BufferedReader;import java.io.InputStream;import jav ...

  2. session和cookie自动登录机制

    cookie的存储 cookie是浏览器支持的一种本地存储方式.以dict,键值对方式存储. {"sessionkey": "123"} 浏览器会自动对于它进行 ...

  3. WPF mvvm 验证，耗时两天的解决方案

    常用类 类名 介绍 ValidationRule 所有自定义验证规则的基类.提供了让用户定义验证规则的入口. ExceptionValidation 表示一个规则,该规则检查在绑定源属性更新过程中引发 ...

  4. vue3.0初尝试

  5. K8s 一、（1、容器基本概念 2、k8s基本概念 ）

    1.容器基本概念 容器其实就是一种特殊的进程,容器是一个 '单进程'模型. Namespace :隔离 Namespace 技术实际上修改了应用进程看待整个计算机"视图",即它的& ...

  6. MySQL、SqlServer、Oracle 三种数据库的优缺点

    MySQL.SqlServer.Oracle 三种数据库的优缺点 一.MySQL 优点: 缺点: 二.SqlServer 优点: 缺点: 三.Oracle 优点: 缺点: 一.MySQL 优点: 体积 ...

  7. size_t 、wchar_t和 ptrdiff_t

    size_t在C语言中就有了. 它是一种"整型"类型,里面保存的是一个整数,就像int, long那样.这种整数用来记录一个大小(size).size_t的全称应该是size ty ...

  8. DEDECMS：解决无法上传图片（在后台插入图片时提示类型不允许）

    在include/uploadsafe.inc.php里把 $imtypes = array ( "image/pjpeg", "image/jpeg", &q ...

  9. 线程不安全（Arraylist,HashSet,HashMap）和写时复制

    package com.yangyuanyuan.juc1205; import java.util.List; import java.util.Map; import java.util.Set; ...

  10. easyx学习心得

    前几天算法课的实验要求实现可视化,搞了半天没动咋实现,然后有大佬说用easyx,,,我寻思着也没教这玩意咋用啊.然后很烦躁的上网找教程,发现没有教怎么使用的,都说有一本说明书(链接),自己调用函数就可 ...