皮皮网

1.源码细读-深入了解terser-webpack-plugin的读懂实现
2.Webpack入门到精通 五（常用配置）
3.Webpack进阶less-loader、css-loader、源源码style-loader源码解析
4.一文看懂 webpack 的分析所有 source map ！🤔
5.放弃 console.log 吧！读懂用 Debugger 你能读懂各种源码
6.webpack 4 源码主流程分析（十一）：文件的源源码生成

源码细读-深入了解terser-webpack-plugin的实现

       深入探索 terser-webpack-plugin：代码压缩与优化的秘密</

       terser-webpack-plugin 是一款强大的 webpack 插件，它巧妙地融合了 terser 库的分析冰海源码功能，旨在为你的读懂 JavaScript 代码带来高效且优雅的压缩体验。要开始使用，源源码只需参考官方文档中关于 minify-options</的分析配置指导。这款插件在 webpack 的读懂 compilation 阶段大展身手，通过 optimizeChunkAssets</钩子实现了异步的源源码代码优化，核心逻辑则隐藏在了名为 optimise</的分析神秘函数中。

       优化艺术</

       在 optimise</函数的读懂舞台，一场资源名的源源码魔术表演正在上演。它首先从 compilation 中获取资源，分析接着根据 availableNumberOfCores</动态决定是否启用并行模式，创建适当的 Worker</。在这里，pLimit</起到了关键作用，它巧妙地控制并发任务的数量，确保效率与稳定性并存。紧接着，遍历每一个 assetNames，一个个任务被 scheduleTask 准备就绪，等待着执行。

       任务分解</

       而每个任务的核心 scheduleTask，就像拆解谜题一般，包含着获取 asset 信息、代码检查、minify 的选择（Worker 或主线程）、新代码生成和缓存更新，以及对资产内容的即时更新。整个过程紧凑而有序，以资源处理和并发控制为核心。

       并行力量</

       terser-webpack-plugin 的亮点之一就是其 parallel</功能，能根据你的计算机 CPU 核心数动态启动 worker，巧妙地利用了 jest-worker 线程池，优先选择高性能的 worker_threads 模式。它通过私有任务队列和先进先出 (FIFO) 管理机制，确保了多进程处理的热血沙尘源码高效性和一致性。

       代码简化与压缩</

       minify 函数的精妙之处在于，它直接调用 terser 库的强大功能，略过不必要的 comments 处理，通过出口 API 实现代码的高效压缩。这个过程既简洁又高效，确保了代码质量的提升。

       全面优化流程</

       terser-webpack-plugin 的优化流程井然有序：异步注册 optimizeChunkAssets</，开启多线程编译（Worker），并在 minify 阶段，利用 terser 的强大压缩能力对代码进行深度处理。而 v4 版本更是增添了异步优化点，让并行处理更加灵活和高效。

Webpack入门到精通 五（常用配置）

       为更好的阅读体验请移步掘金

       初始化项目

       在package.json中添加

       运行yarn build，即可看到当前打包好的dist.js文件

       使用webpack build支持IE，用babel-loader打包js

       安装babel-loader npm

       使用babel-loader打包jsx

       测试

       yarn build

       为webpack配置eslint

       eslint-config-react-app 包含Create React App使用的可共享 ESLint 配置。npm link

       让webpack可以感知到eslint的配置，从而在编译的过程中提示报错信息

       在没加eslint-webpack-plugin之前，尽管编辑器中eslint报错，但在运行yarn build时，它仍能编译成功。如下图所示

       加完之后的情况，此时不仅eslint报错，webpack构建时也会在控制台报错，这样很好地使用了eslint

       使用babel-loader打包TypeScript

       参考babel官网

       添加一个test.tsx，并在index.js中引入，以下结果编译成功

       让eslint支持TypeScript

       让eslint支持ts，添加相关配置

       运行yarn build发现此时编译仍可成功

       修改后的效果

       使用babel-loader打包tsx

       生成tsconfig.json文件

       编写tsx-demo.tsx文件并在index.js中引入进行测试

       CRLF是什么？一、LF和CRLF是什么？二、LF和CRLF区别

       让js和ts支持@alias

       引入代码进行测试

       让webpack支持scss

       使用sass-loader npm

       scss自动导入全局文件，scss共享变量给js

       可以让项目中使用的css变量由同一份js和scss共同维护一份变量

       webpack支持less文件

       使用less-loader npm

       less共享给js，对比scss和less

       若要选择，则选择scss

       stylus文件

       使用stylus npm

       webpack config重构，生产页面单独提取css文件

       使用mini-css-extract-plugin webpack文档

       自动生成HTML页面

       使用html-webpack-plugin npm

       webpack优化：单独打包runtime

       单独打包runtime的原因

       webpack优化：使用splitChunks将node依赖单独打包

       在编译时缓存React等类库文件

       webpack优化：固定modules

       运行yarn build后，可以看到引入了三个js文件

       optimizationmoduleids

       webpack多页面

       webpack优化：common插件

       如果共有文件，则打包成一个文件；如果两个入口同时引用了一个文件，看这个打包后页面引入js的顺序

       无限多页面的实现思路

       只需将这两个参数设置为动态生成的即可满足要求。测试后大功告成！！！vfp源码下载

       最后附上源代码链接

       其他文章

       一咻：Webpack入门到精通 五（常用配置）

       一咻：Webpack 入门到精通四 （插件）

       一咻：Webpack入门到精通 三（Loader原理）

       一咻：Webpack入门到精通 二（核心原理）

       一咻：Webpack入门到精通 一（AST、Babel、依赖）

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

       深入解析 Webpack 样式 loader

       本文将通过探讨 less-loader、css-loader、style-loader 的作用和实现方式，加深对 loader 的理解。

       对于一个样式文件（如 less 文件），最常用的 loader 配置为将 less 代码转译为浏览器可识别的 CSS 代码。

       less-loader 的主要功能是利用 less 库将 less 语法转译为 CSS 语法，其原理在于调用 less 库提供的方法，完成转译后输出 CSS 代码。

       接下来，css-loader 的作用是解析 CSS 文件中的 @import 和 url 语句，并处理 CSS-modules，最终以 js 模块形式输出结果。

       css-loader 会将多个 CSS 文件的样式内容以字符串形式拼接，形成 js 模块，供其他 loader 使用。

       而 style-loader 的任务是将 css-loader 处理后的结果以 style 标签的形式插入 DOM 树中。

       理解 style-loader 的实现逻辑，可以深化对 loader 调用链、执行顺序和模块化输出的掌握。

       总的来说，less-loader、css-loader、style-loader 的结合使用，构成了 Webpack 处理样式文件的关键步骤，对于理解 Webpack 的整体工作流程至关重要。

一文看懂 webpack 的所有 source map ！🤔

       深入理解Webpack的各类source map

       在前端开发中，source map经常让人感到困惑，尤其在Webpack提供的众多source选项中。本文将逐一探讨它们的不同之处。

       source map，就像是编译后的代码与原始源代码之间的导航图，有助于在生产环境中追踪和修复错误。当代码编译后，站长门户源码失去可读性，source map的作用就是通过编译后的代码找到对应的源代码位置，帮助开发者快速定位问题。

       在webpack配置中，devtool属性控制source map的生成形式。它支持多种类型，尽管名称多样，但核心机制相似。理解几个关键术语是关键：eval、source-map、inline-source-map、nosources-source-map、hidden-source-map、cheap-source-map和cheap-module-source-map。

       以eval为例，它不生成独立的.map文件，而是将映射信息内置于eval函数中，虽然在开发环境中能提供一些帮助，但在生产环境中由于调试体验差而不可取。而source-map则是最标准的形式，生成单独的.map文件，错误信息定位准确，能查看源码。

       尝试在项目中故意引入错误，可以看到不同source map类型下的报错信息差异。eval-source-map提供基本的错误定位，但列号可能不准确。而inline-source-map和nosources-source-map则展示了源码信息的完整性和缺失。hidden-source-map和cheap-source-map虽然有映射，但信息可能模糊或处理过。而cheap-module-source-map则定位正确，但无法定位到具体列。

       总结来说，理解source map的关键在于理解每个选项背后的含义，如何根据项目需求选择合适的配置。希望这篇文章能帮助你清晰地认识Webpack的source map功能。

放弃 console.log 吧！用 Debugger 你能读懂各种源码

       很多同学不清楚为什么要使用debugger进行调试，难道console.log不行吗？

       即使学会了使用debugger，vr房产源码还是有很多代码看不懂，如何调试复杂的源码呢？

       这篇文章将为你讲解为什么要使用这些调试工具：console.log vs Debugger。

       相信绝大多数同学都会使用console.log进行调试，将想查看的变量值打印在控制台。

       这种方法可以满足基本需求，但遇到对象打印时就无法胜任了。

       比如，我想查看webpack源码中的compilation对象的值，我尝试打印了一下：

       但你会发现，当对象的值也是对象时，它不会展开，而是打印一个[Object] [Array]这样的字符串。

       更严重的是，打印的内容过长会超过缓冲区的大小，在terminal中显示不全：

       而使用debugger来运行，在这里设置一个断点查看，就没有这些问题了：

       有些同学可能会说，那打印一个简单的值时使用console.log还是很方便的。

       比如这样：

       真的吗？

       那还不如使用logpoint：

       代码执行到这里就会打印：

       而且没有污染代码，使用console.log的话，调试完成后这个console也不得不删除掉。

       而logpoint不需要，它就是一个断点的设置，不在代码中。

       当然，最重要的是debugger调试可以看到调用栈和作用域！

       首先是调用栈，它就是代码的执行路线。

       比如这个App的函数组件，你可以看到渲染这个函数组件会经历workLoop、beginWork、renderWithHooks等流程：

       你可以点击调用栈的每一帧，查看都执行了什么逻辑，用到了什么数据。比如可以看到这个函数组件的fiber节点：

       再就是作用域，点击每一个栈帧就可以看到每个函数的作用域中的变量：

       使用debugger可以看到代码的执行路径，每一步的作用域信息。而你使用console.log呢？

       只能看到那个变量的值而已。

       得到的信息量差距不是一点半点，调试时间长了，别人会对代码的运行流程越来越清晰，而你使用console.log呢？还是老样子，因为你看不到代码执行路径。

       所以，不管是调试库的源码还是业务代码，不管是调试Node.js还是网页，都推荐使用debugger打断点，别再用console.log了，即使想打印日志，也可以使用LogPoint。

       而且在排查问题的时候，使用debugger的话可以加一个异常断点，代码跑到抛异常的地方就会断住：

       可以看到调用栈来理清出错前都走了哪些代码，可以通过作用域来看到每一个变量的值。

       有了这些，排查错误就变得轻松多了！

       而你使用console.log呢？

       什么也没有，只能自己猜。

       Performance

       前面说debugger调试可以看到一条代码的执行路径，但是代码的执行路径往往比较曲折。

       比如那个React会对每个fiber节点做处理，每个节点都会调用beginWork。处理完之后又会处理下一个节点，再次调用beginWork：

       就像你走了一条小路，然后回到大路之后又走了另一条小路，使用debugger只能看到当前这条小路的执行路径，看不到其他小路的路径：

       这时候就可以结合Performance工具了，使用Performance工具看到代码执行的全貌，然后用debugger来深入每一条代码执行路径的细节。

       SourceMap

       sourcemap非常重要，因为我们执行的都是编译打包后的代码，基本是不可读的，调试这种代码也没有什么意义，而sourcemap就可以让我们直接调试最初的源码。

       比如vue，关联了sourcemap之后，我们能直接调试ts源码：

       nest.js也是：

       不使用sourcemap的话，想搞懂源码，但你调试的是编译后的代码，怎么读懂呢？

       读懂一行

       前面说的debugger、Performance、SourceMap只是调试代码的工具，那会了调试工具，依然读不懂代码怎么办呢？

       我觉得这是不可能的。

       为什么这么说呢？

       就拿react源码来说：

       switch case能读懂吧。三目运算符能读懂吧。函数调用能读懂吧。

       每一行代码都能读懂，而全部的代码不就是由这一行行代码组成的么？

       加上我们可以单步执行来知道代码执行路径。

       为啥每行代码都能读懂，连起来就读不懂了呢？

       那应该是代码太多了，而你花的时间不够而已。

       先要读懂一行，一个函数，读懂一个小功能的实现流程，慢慢积累，之后了解的越来越多之后，你能读懂的代码就会越多。

       总结

       这篇文章讲了为什么要使用调试工具，如何读懂复杂代码。

       console.log的弊端太多了，大对象打印不全，会超过terminal缓冲区，对象属性不能展开等等，不建议大家使用。即使要打印也可以使用LogPoint。

       使用debugger可以看到调用栈，也就是代码的执行路径，每个栈帧的作用域，可以知道代码从开始运行到现在都经历了什么，而console.log只能知道某个变量的值。

       此外，报错的时候也可以通过异常断点来梳理代码执行路径来排查报错原因。

       但debugger只能看到一条执行路径，可以使用Performance录制代码执行的全流程，然后再结合debugger来深入其中一条路径的执行细节。

       此外，只有调试最初的源码才有意义，不然调试编译后的代码会少很多信息。可以通过SourceMap来关联到源码，不管是Vue、React的源码还是Nest.js、Babel等的源码。

       会了调试之后，就能调试各种代码了，不存在看不懂的源码，因为每一行代码都是基础的语法，都是能看懂的，如果看不懂，只可能是代码太多了，你需要更多的耐心去读一行行代码、一个个函数、理清一个个功能的实现，慢慢积累就好了。

       掌握基于debugger、Performance、SourceMap等调试代码之后，各种网页和Node.js代码都能调试，各种源码都能读懂！

webpack 4 源码主流程分析（十一）：文件的生成

       本文深入分析了 Webpack 4 中文件生成的具体流程。在资源写入文件阶段，通过一系列优化和处理，最终返回到 Compiler.js 的 compile 方法，其中 Compiler 的属性 _lastCompilationFileDependencies 和 _lastCompilationContextDependencies 被赋予了 fileDependencies 和 contextDependencies。紧随其后的是创建目标文件夹的过程，该操作通过 outputPath 属性配置，结合 mkdirp 函数完成。

       在创建目标文件并写入阶段，通过 asyncLib.forEachLimit 方法并行处理每个文件资源，实现路径拼接、源码转换为 buffer，最后写入真实路径的文件。对于不同类型的 source 实例，如 CachedSource、ConcatSource 和 ReplaceSource，其处理逻辑各不相同，但最终目标都是获取替换后的字符串并合并返回 resultStr。所有文件创建写入完成后，执行回调，触发Compiler.afterEmit:hooks，进一步设置 stats 并打印构建信息。

       至此，构建流程全部结束。通过本文的分析，我们可以更直观地了解 Webpack 4 中文件生成的具体实现细节，为深入理解 Webpack 的工作原理和优化提供理论支持。本章小结，下章将解析打包后的文件，敬请期待。

webpack打包原理 ? 看完这篇你就懂了 !

       深入浅出 webpack

       webpack 是一个现代 JavaScript 应用程序的静态模块打包器，其本质是对模块进行递归构建依赖关系图，然后打包成一个或多个 bundle。

       理解 webpack 的工作流程，像是理解一条生产线，每一步都有其职责，依赖于前一步骤的结果。插件则像是生产线中的功能模块，根据特定时机对资源进行处理。

       webpack 通过 Tapable 组织整个生产流程，它在运行中广播事件，插件只需监听感兴趣的事件，即可加入流程，改变整个系统。事件流机制确保了插件的有序性，提高了系统的扩展性。

       webpack 的核心概念包括：入口起点（Entry），定义了构建开始的模块；输出（Output），指定生成的 bundle 存储位置；模块（Module），一切皆模块，所有资源被转换为模块；代码块（Chunk），多个模块组合用于代码优化；loader，处理非 JavaScript 文件，将所有类型转换为可引用的模块；插件，执行更广泛任务。

       理解 webpack 的构建流程，从入口文件开始，遍历依赖关系，转换为浏览器可执行代码，并生成最终的 bundle。在实践过程中，定义 Compiler 类，使用 babel 解析源代码，遍历 AST 抽象语法树，找出依赖模块，转换为可执行代码，并构建依赖关系图，重写 require 函数以输出 bundle。

       完成 webpack 的理解，需要通过实践，例如构建一个简易版本的 webpack。从定义 Compiler 类开始，解析入口文件，使用 babel 解析内部语法，找出依赖模块，将 AST 转换为代码，递归解析所有依赖项，构建依赖关系图，重写 require 函数以输出 bundle。

       通过实际操作，可以深入理解 webpack 的 bundle 实现过程，从入口文件执行开始，利用 eval 执行代码，处理依赖引用，生成最终的 bundle。通过这个实践过程，可以全面掌握 webpack 的工作原理和使用方法。