皮皮网

1.webpackloaderԴ???ȫ
2.Webpack 案例 —— vue-loader 原理分析
3.vue-loader源码分析学习
4.Webpack进阶less-loader、css-loader、style-loader源码解析
5.深入Webpack之Loader
6.Loader学习，简析babel-loader

webpackloaderԴ???ȫ

       深入理解Webpack loader，本文详尽解析其原因、原理、iapp加QQ源码用法和自定义方法！

       学习前端时，loader的作用不容忽视。loader机制的引入，使得Webpack能够处理多种非标准文件，如.vue、.ts、和.css等。它解决了Webpack最初只能处理.js和.json文件的局限性。

       当遇到.js文件中import导入非.js文件时，loader就派上用场。它本质上是一个JavaScript模块，将非标准文件转换为Webpack能理解的模块，让Webpack有能力处理各种类型的文件。

       loader分类与执行顺序

       pre-loader、normal-loader、inline-loader和post-loader，其中pre-loader和post-loader可通过enforce属性指定优先级。

       内联loader在代码中直接使用，较少见，这里暂不详述。

       loader执行顺序是：同优先级的loader按正常、内联、前置、后置顺序；不同优先级遵循pre-loader→normal-loader→inline-loader→post-loader。

       Pitching阶段允许loader提前返回结果，影响执行顺序。

       同步和异步loader的区别在于处理方式：同步loader必须返回结果，异步loader则使用回调函数在完成操作后返回。

       自定义loader示例

       面对特定需求，如px单位转换，开发者可以创建自定义loader来实现特殊处理。

       常见loader功能介绍

       file-loader：复制文件并返回路径

       url-loader：将文件转为base

       raw-loader：提取文件内容

       style-loader：将css插入js中

       ...（详细介绍了个常见loader及其用法）

       这些loader配置是开发中的基础，具体应用需关注官方文档，保持更新。

       现在，app招聘源码下载你对Webpack loader的理解更为深入了！继续学习，你的前端技能又上新台阶。

Webpack 案例 —— vue-loader 原理分析

       两个核心问题：一、Vue SFC 文件包含了多种内容格式：样式、脚本、模板以及其他自定义块，Vue-loader 如何针对这些不同格式的内容进行处理和解析？二、针对Vue SFC中不同内容块的解析，Vue-loader 如何复用其他loader，特别是针对less 定义的样式块时，Vue-loader 是如何调用less-loader 来处理的？

       首先，我们需要理解Vue-loader的工作原理。它主要包含了三大部分：插件、预处理阶段和核心内容处理阶段。在处理过程中，Vue-loader 通过插件扩展了 webpack 配置信息，实现对SFC的高效解析。

       预处理阶段，Vue-loader 插件通过apply函数在webpack的配置中插入动态loader（pitcher），并且复制原有的loader规则，使新创建的规则能够识别SFC内容中的不同格式块。这里的pitcher和原有的loader规则配合，为后续的解析过程打下了基础。

       接着，我们来到核心内容处理阶段。在这一阶段，经过一系列loader的逐层处理，Vue-loader 会分别针对样式、脚本、模板以及其他自定义块完成各自的转换。例如，在引入less 定义的样式块时，经过pitcher处理后的import路径会被less-loader进一步解析，实现样式定义到实际样式代码的转换。

       简而言之，Vue-loader 通过巧妙地利用loader的复用和插件的动态扩展，不仅简化了处理流程，提高了代码的可读性和可维护性，还保证了对于不同格式内容块的高效解析。在处理过程中，layim 源码 怎么压缩遵循了webpack loader编写的一般规范，使其在应用中具有较高的通用性。

       综上所述，Vue-loader 基于其设计原理和运行机制，成功实现了针对Vue SFC中不同类型内容块的高效解析与复用其他loader的功能。不仅简化了开发人员的工作流程，还提升了代码的扩展性和灵活度，是webpack生态中一个非常实用且强大的组件。

vue-loader源码分析学习

       Vue-loader源码深入解析

       Webpack配置中的loader调用和执行位置是在NormalModule的_doBuild方法中，当module需要转换为source时，会用到loader-runner包。本文将逐步分析loader的核心代码。

       首先，loader的入口点涉及到source的处理，它包含了整个.vue文件的代码。VueLoaderPlugin的作用在于检查版本差异并加载相应的文件，以适应Webpack 5的更新。

       接着，代码中的一大块内容是关于module.rules的处理，这些规则与配置文件中定义的类似，如test、include、exclude和resolve。RuleSetCompiler是一个处理rule集合的处理器，它负责收集和转换规则字段，生成带有condition和effects的集合。

       loader会监听compiler的compilation和loader hooks，确保插件在vue-loader之前执行。之后，会遍历配置的规则，对不符合特定条件的规则进行报错处理，并处理vue-loader相关的规则，添加自定义字段。

       在cloneRule方法中，关键步骤是调用ruleSetCompiler.compileRule，这个方法会执行hook并处理每个rule，将规则的特定字段转换成最终的条件和效果。整个过程确保了规则的正确匹配和处理。

       总结来说，rulePlugin扩展配置文件中的rule，而ruleSetCompiler负责管理和执行这些规则，jdk源码查看工具生成最终的处理逻辑。在处理过程中，巧妙地利用闭包缓存和query判断，确保了对vue资源的精确匹配和处理。

       最后，VueLoaderPlugin还针对template、js和ts文件的处理进行了特殊规则设置，确保render function与其他用户代码得到相同的处理，同时通过pitcher处理vue块请求和资源顺序调整。

Webpack进阶less-loader、css-loader、style-loader源码解析

       Webpack进阶学习中，Loader的运用是关键环节。在深入理解Loader基础后，本文将解析less-loader、css-loader和style-loader的内部工作原理。

       less-loader是专为处理Less样式文件设计的，它将Less代码转换为浏览器能识别的CSS。以less文件为例，其工作原理是调用less库的功能，将扩展了CSS特性的Less代码转化为CSS，如变量、Mixin和函数等。

       css-loader的功能则更为复杂，它不仅处理@import和url语句，还支持css-modules，将样式文件内容合并并作为JavaScript模块输出。以多个样式文件（如a.css、b.css和c.css）为例，css-loader会将它们合并成一个JavaScript模块，输出包含所有样式内容的字符串。

       style-loader的作用在于将css-loader转化后的CSS样式代码插入到DOM中。理论上，我们可能期望直接在JavaScript中插入CSS代码，但css-loader返回的是模块化的代码，不能直接放入style标签。style-loader的实现通过一种巧妙的方式，将这些模块代码适当地包装，确保样式能正确插入到文档中。

       style-loader的设计思路独特，其内部逻辑涉及Loader调用链、金蜘蛛 指标源码执行顺序和模块化输出等多个层面，理解style-loader的运作机制，对于深化对Webpack和Loader的理解至关重要。深入研究这些Loader的源码，无疑能提升你对Webpack进阶应用的掌握程度。

深入Webpack之Loader

       Webpack是一个广泛应用于前端领域的模块化构建工具。利用Webpack，我们可以打包js、css、、字体等类型的静态资源。而其中，Loader是一个关键组件，用于处理除js之外的其他静态类型资源的构建。

       Loader的工作原理是通过导出一个function，这个function用于内容的转换。根据需要，Loader可以是同步或异步的。同步Loader使用return或this.callback来直接返回转换过的内容，而异步Loader通过this.async来执行callback。

       在开发自己的Loader时，推荐使用异步Loader，因为它避免了同步机制可能导致的阻塞问题。Loader的执行顺序是从右到左进行，但pitch属性的执行顺序是从左到右，并且它们的执行是在所有Loader开始执行之前。pitch属性可以用于获取到需要的信息进行一些定制操作。

       在Webpack中，Loader的执行流程是首先加载Pitch Loader，然后加载Normal Loader。Loader的上下文会包含callback和async等属性，这些属性由Webpack注入。通过这些属性，Loader可以执行转换操作。转换后的结果会被基于acorn的JavascriptParser解析器解析，然后传递给handleParseResult函数进行进一步处理。

       通过本文的介绍，您对Webpack Loader机制有了更深刻的理解。关注微信公众号“前端FeWeekly”获取更多技术好文，期待您的支持和反馈。

Loader学习，简析babel-loader

       Loader是什么？

       在阅读了webpack工作原理的两篇文章后，我们了解到Loader是模块转换器，它将模块内容转换成新的形式。每个Loader只负责单一的任务，因此多个Loader会按照链式顺序执行，以达到最终的转换效果。

       Loader本质上是一个Node.js模块，它导出一个函数，这意味着我们可以使用所有Node.js的API。下面将介绍webpack提供的供Loader调用的API，帮助大家对Loader有更深入的理解，并分析babel-loader的源码，看看我们常用的Loader是如何编写的。

       除了返回转换后的内容，有些情况下还需要返回sourceMap或AST语法树等额外内容。这时，我们可以使用webpack提供的API this.callback。使用this.callback时，Loader函数必须返回undefined，以便webpack知道返回的结果在this.callback中。

       异步Loader在this.async() API下如何实现，以及像file-loader这样的Loader如何处理二进制数据，这些都是Loader开发中需要了解的内容。

       缓存是优化Loader性能的关键。使用this.cacheable(Boolean)可以缓存Loader转换后的内容，当文件或依赖文件没有发生变化时，使用缓存的转换内容，从而提高效率。

       除了常用的API，还有其他一些常用的API，例如：module.exports.raw = true，告知webpack需要二进制数据。

       babel-loader源码简析：babel-loader依赖@babel/core，因此需要同时安装@babel/core、babel-preset-env、babel-plugin-transform-runtime、babel-runtime。源码的第一行是module.exports = makeLoader()，这是一个高阶函数，返回了一个函数。loader函数中最重要的实现部分是异步Loader，它通过const callback = this.async()实现。

       loader函数入参有三个：source（待转换的code），inputSourceMap（上一个loader处理后的sourceMap），overrides（自定义加载器）。loader函数会获取options，并获取当前处理转换的文件的路径this.resourcePath。如果存在自定义加载器，则执行let override = require(loaderOptions.customize)。然后将函数传入参数和LoaderOptions归并，得到programmaticOptions。调用babel.loadPartialConfig可以拿到babel配置并赋值给config变量，解决插件和预设生成cacheIdentifier等问题。

       最后，将处理后的结果返回。每个Loader返回值都是一个Function，将带转换内容传入，得到转换后的内容。本文介绍了Loader的基本概念，了解了webpack为Loader提供的常用API，并通过简析babel-loader的源码，让大家对Loader的编写有了更深入的了解。

webpack5loader和plugin原理解析

       大家好，今天为大家解析下loader和plugin

一、区别

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

       plugin赋予了Webpack各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决loader无法实现的其他事从整个运行时机上来看，如下图所示：

       可以看到，两者在运行时机上的区别：

       loader运行在打包文件之前plugins在整个编译周期都起作用在Webpack运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果

       对于loader，实质是一个转换器，将A文件进行编译形成B文件，操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程

       下面我们来看看loader和plugin实现的原理

Loader原理loader概念

       帮助webpack将不同类型的文件转换为webpack可识别的模块。

loader执行顺序

       分类

       pre：前置loader

       normal：普通loader

       inline：内联loader

       post：后置loader

       执行顺序

       4类loader的执行优级为：pre>normal>inline>post。

       相同优先级的loader执行顺序为：从右到左，从下到上。

       例如：

//此时loader执行顺序：loader3-loader2-loader1module:{ rules:[{ test:/\.js$/,loader:"loader1",},{ test:/\.js$/,loader:"loader2",},{ test:/\.js$/,loader:"loader3",},],},//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},

       使用loader的方式

       配置方式：在webpack.config.js文件中指定loader。（pre、normal、postloader）

       内联方式：在每个import语句中显式指定loader。（inlineloader）

开发一个loader1.最简单的loader//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};

       它接受要处理的源码作为参数，输出转换后的js代码。

2.loader接受的参数

       content源文件的内容

       mapSourceMap数据

       meta数据，可以是任何内容

loader分类1.同步loadermodule.exports=function(content,map,meta){ returncontent;};

       this.callback方法则更灵活，因为它允许传递多个参数，而不仅仅是content。

module.exports=function(content,map,meta){ //传递map，让source-map不中断//传递meta，让下一个loader接收到其他参数this.callback(null,content,map,meta);return;//当调用callback()函数时，总是返回undefined};2.异步loadermodule.exports=function(content,map,meta){ constcallback=this.async();//进行异步操作setTimeout(()=>{ callback(null,result,map,meta);},);};

       由于同步计算过于耗时，在Node.js这样的单线程环境下进行此操作并不是好的方案，我们建议尽可能地使你的loader异步化。但如果计算量很小，同步loader也是可以的。

3.RawLoader

       默认情况下，资源文件会被转化为UTF-8字符串，然后传给loader。通过设置raw为true，loader可以接收原始的Buffer。

module.exports=function(content){ //content是一个Buffer数据returncontent;};module.exports.raw=true;//开启RawLoader4.PitchingLoadermodule.exports=function(content){ returncontent;};module.exports.pitch=function(remainingRequest,precedingRequest,data){ console.log("dosomethings");};

       webpack会先从左到右执行loader链中的每个loader上的pitch方法（如果有），然后再从右到左执行loader链中的每个loader上的普通loader方法。

       在这个过程中如果任何pitch有返回值，则loader链被阻断。webpack会跳过后面所有的的pitch和loader，直接进入上一个loader。

loaderAPI方法名含义用法this.async异步回调loader。返回this.callbackconstcallback=this.async()this.callback可以同步或者异步调用的并返回多个结果的函数this.callback(err,content,sourceMap?,meta?)this.getOptions(schema)获取loader的optionsthis.getOptions(schema)this.emitFile产生一个文件this.emitFile(name,content,sourceMap)this.utils.contextify返回一个相对路径this.utils.contextify(context,request)this.utils.absolutify返回一个绝对路径this.utils.absolutify(context,request)

       更多文档，请查阅webpack官方loaderapi文档

手写clean-log-loader

       作用：用来清理js代码中的console.log

//loaders/clean-log-loader.jsmodule.exports=functioncleanLogLoader(content){ //将console.log替换为空returncontent.replace(/console\.log\(.*\);?/g,"");};手写banner-loader

       作用：给js代码添加文本注释

       loaders/banner-loader/index.js

constschema=require("./schema.json");module.exports=function(content){ //获取loader的options，同时对options内容进行校验//schema是options的校验规则（符合JSONschema规则）constoptions=this.getOptions(schema);constprefix=`/**Author:${ options.author}*/`;return`${ prefix}\n${ content}`;};

       loaders/banner-loader/schema.json

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},0手写babel-loader

       作用：编译js代码，将ES6+语法编译成ES5-语法。

       下载依赖

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},1

       loaders/babel-loader/index.js

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},2

       loaders/banner-loader/schema.json

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},3手写file-loader

       作用：将文件原封不动输出出去

       下载包

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},4

       loaders/file-loader.js

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},5

       loader配置

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},6手写style-loader

       作用：动态创建style标签，插入js中的样式代码，使样式生效。

       loaders/style-loader.js

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},7Plugin原理Plugin的作用

       通过插件我们可以扩展webpack，加入自定义的构建行为，使webpack可以执行更广泛的任务，拥有更强的构建能力。

Plugin工作原理

       webpack就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack通过Tapable来组织这条复杂的生产线。webpack在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。webpack的事件流机制保证了插件的有序性，使得整个系统扩展性很好。——「深入浅出Webpack」

       站在代码逻辑的角度就是：webpack在编译代码过程中，会触发一系列Tapable钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当webpack构建的时候，插件注册的事件就会随着钩子的触发而执行了。

Webpack内部的钩子什么是钩子

       钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks（钩子）。开发插件，离不开这些钩子。

Tapable

       Tapable为webpack提供了统一的插件接口（钩子）类型定义，它是webpack的核心功能库。webpack中目前有十种hooks，在Tapable源码中可以看到，他们是：

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},8

       Tapable还统一暴露了三个方法给插件，用于注入不同类型的自定义构建行为：

       tap：可以注册同步钩子和异步钩子。

       tapAsync：回调方式注册异步钩子。

       tapPromise：Promise方式注册异步钩子。

Plugin构建对象Compiler

       compiler对象中保存着完整的Webpack环境配置，每次启动webpack构建时它都是一个独一无二，仅仅会创建一次的对象。

       这个对象会在首次启动Webpack时创建，我们可以通过compiler对象上访问到Webapck的主环境配置，比如loader、plugin等等配置信息。

       它有以下主要属性：

       compiler.options可以访问本次启动webpack时候所有的配置文件，包括但不限于loaders、entry、output、plugin等等完整配置信息。

       compiler.inputFileSystem和compiler.outputFileSystem可以进行文件操作，相当于Nodejs中fs。

       compiler.hooks可以注册tapable的不同种类Hook，从而可以在compiler生命周期中植入不同的逻辑。

       compilerhooks文档

Compilation

       compilation对象代表一次资源的构建，compilation实例能够访问所有的模块和它们的依赖。

       一个compilation对象会对构建依赖图中所有模块，进行编译。在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、分块(chunk)、哈希(hash)和重新创建(restore)。

       它有以下主要属性：

       compilation.modules可以访问所有模块，打包的每一个文件都是一个模块。

       compilation.chunkschunk即是多个modules组成而来的一个代码块。入口文件引入的资源组成一个chunk，通过代码分割的模块又是另外的chunk。

       compilation.assets可以访问本次打包生成所有文件的结果。

       compilation.hooks可以注册tapable的不同种类Hook，用于在compilation编译模块阶段进行逻辑添加以及修改。

       compilationhooks文档

生命周期简图开发一个插件最简单的插件

       plugins/test-plugin.js

//此时loader执行顺序：loader1-loader2-loader3module:{ rules:[{ enforce:"pre",test:/\.js$/,loader:"loader1",},{ //没有enforce就是normaltest:/\.js$/,loader:"loader2",},{ enforce:"post",test:/\.js$/,loader:"loader3",},],},9注册hook//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};0启动调试

       通过调试查看compiler和compilation对象数据情况。

       package.json配置指令

//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};1

       运行指令

//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};2

       此时控制台输出以下内容：

PSC:\Users\\Desktop\source>//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};2>source@1.0.0debug>node--inspect-brk./node_modules/webpack-cli/bin/cli.jsDebuggerlisteningonws://.0.0.1:/ea-7b--a7-fccForhelp,see:/post/

       开发思路:

       我们需要借助html-webpack-plugin来实现

       在html-webpack-plugin输出index.html前将内联runtime注入进去

       删除多余的runtime文件

       如何操作html-webpack-plugin？官方文档

       实现：

//loaders/loader1.jsmodule.exports=functionloader1(content){ console.log("hellofirstloader");returncontent;};7