1.【Webpack进阶】less-loader、码泄css-loader、码泄style-loader源码解析
2.源码细读-深入了解terser-webpack-plugin的码泄实现
3.webpack作者评价vite
4.一个关于webpack 自动use strict引起的有趣的业务bug以及背后原理
5.webpack打包原理 ? 看完这篇你就懂了 !

【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 模块，css样式源码供其他 loader 使用。

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

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

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

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

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

       terser-webpack-plugin 是一款强大的 webpack 插件，它巧妙地融合了 terser 库的功能，旨在为你的 JavaScript 代码带来高效且优雅的压缩体验。要开始使用，只需参考官方文档中关于 minify-options</的配置指导。这款插件在 webpack 的 compilation 阶段大展身手，通过 optimizeChunkAssets</钩子实现了异步的ucos源码分析代码优化，核心逻辑则隐藏在了名为 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 的php记账源码优化流程井然有序：异步注册 optimizeChunkAssets</，开启多线程编译（Worker），并在 minify 阶段，利用 terser 的强大压缩能力对代码进行深度处理。而 v4 版本更是增添了异步优化点，让并行处理更加灵活和高效。

webpack作者评价vite

       è¯„价：Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生ES-Module的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。

webpack缺点是缓慢的服务器启动

       å½“冷启动开发服务器时，基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。

vite改进

       Vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

       ä¾èµ–大多为纯JavaScript并在开发时不会变动。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模块中。

       Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快-倍。

       æºç é€šå¸¸åŒ…含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。

       Vite以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

       webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖，然后进行打包，在启动webpack-dev-server，请求服务器时，直接显示打包结果。

       webpack打包之后存在的问题：随着模块的增多，会造成打出的 bundle 体积过大，进而会造成热更新速度明显拖慢。

       vite: 启动服务器=> 请求模块时按需动态编译显示。是先启动开发服务器，请求某个模块时再对该模块进行实时编译，因为现代游览器本身支持ES-Module，所以会自动向依赖的Module发出请求。

       æ‰€ä»¥vite就将开发环境下的模块文件作为浏览器的执行文件，而不是像webpack进行打包后交给本地服务器。

       åˆ†æžäº†webpack和vite的打包方式后，也就明白了为什么vite比webpack打包快，因为它在启动的时候不需要打包，所以不用分析模块与模块之间的依赖关系，不用进行编译。这种方式就类似于我们在使用某个UI框架的时候，可以对其进行按需加载。

       çƒ­æ›´æ–°æ–¹é¢ï¼Œæ•ˆçŽ‡æ›´é«˜ã€‚当改动了某个模块的时候，也只用让浏览器重新请求该模块，不需要像webpack那样将模块以及模块依赖的模块全部编译一次。

一个关于webpack 自动use strict引起的有趣的业务bug以及背后原理

       Webpack自动use strict引起的业务bug分析

       在处理业务bug的过程中，我发现它不仅提供了锻炼技巧的机会，还揭示了一些隐藏的知识点。

       问题起因于公司管理后台，一个基于webpack多页面应用的项目，其中部分文件夹使用了webpack的特殊处理，而其他未处理的文件夹则仅简单地使用babel进行es5转换。当某个需求需要迁移至已处理的文件夹时，问题出现了。

       问题代码中，一个函数没有声明就直接被使用，导致了"params is not defined"的错误。这是因为引入了严格模式，严格模式下未声明就使用会导致编译错误。

       解决方法简单，只需为变量声明即可。然而，问题的关键在于严格模式的来源。虽然代码本身并未主动引入，但webpack的打包过程可能在无意中引入了。

       在webpack打包产物对比中，我们发现迁移后引入了use strict，这成为问题的根源。进一步的代码分析发现，use strict的出现与import的使用有关，因为webpack会将import转换为浏览器兼容的形式，并将其依赖放在头部执行。

       总结来说，问题在于在使用import时，webpack遵循ES6模块的严格模式规范，而es module本身已经是严格模式。因此，webpack会自动添加use strict以适应es module。通过追踪Webpack源码，我们找到了use strict插入的确切位置，这解决了问题的原因。

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 的工作原理和使用方法。