1.源码细读-深入了解terser-webpack-plugin的流源实现
2.Webpack进阶less-loader、css-loader、源码style-loader源码解析
3.webpack 4 源码主流程分析（十一）：文件的分析生成
4.Webpack入门到精通 五（常用配置）

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

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

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

       优化艺术</

       在 optimise</函数的源码舞台，一场资源名的分析魔术表演正在上演。它首先从 compilation 中获取资源，流源接着根据 availableNumberOfCores</动态决定是源码否启用并行模式，创建适当的分析 Worker</。在这里，closea指标源码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进阶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 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入门到精通 五（常用配置）

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

       初始化项目

       在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的顺序

       无限多页面的实现思路

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

       最后附上源代码链接

       其他文章

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

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

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

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

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