1.webpack 4 源码主流程分析（十一）：文件的生成
2.Webpack入门到精通 五（常用配置）
3.Webpack进阶less-loader、css-loader、style-loader源码解析
4.WebPack插件实现：打包之后自动混淆加密JS文件
5.源码细读-深入了解terser-webpack-plugin的实现
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、依赖）
Webpack进阶less-loader、css-loader、style-loader源码解析
Webpack进阶学习中，Loader的校运会的ps源码运用是关键环节。在深入理解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插件实现：打包之后自动混淆加密JS文件
在WebPack中实现对打包生成的JS文件进行混淆加密，可采用JShaman插件，确保代码安全性和可维护性。
插件实现步骤如下：
1、创建插件文件JShamanObfuscatorPlugin.js，编写代码用于混淆加密JS文件。该插件需实现混淆加密功能，以便对编译后的JS文件进行保护。
2、在webpack.config.js配置文件中引入JShamanObfuscatorPlugin，并将其添加到plugins数组中。配置时需确保插件能够正确识别并处理打包过程中的JS文件，实现混淆加密。
功能测试阶段，通过编写Example.js和Mod.js两个示例文件来验证混淆加密效果。
Example.js示例代码如下，用于展示未混淆加密前的JS代码结构。
Mod.js示例代码如下，展示未混淆加密前的JS代码逻辑。
运行Webpack编译，生成的bundle.js文件中，JS代码已被混淆加密处理。加密后的代码呈现出高度不可读性，有效保护了源代码信息。
相比之下，未使用JShaman插件的bundle.js文件，其代码结构和逻辑清晰可读。对比显示，插件实现的混淆加密功能显著提高了代码的安全性和复杂性。
源码细读-深入了解terser-webpack-plugin的实现
terser-webpack-plugin 是一个基于 webpack 的插件，它利用 terser 库对 JavaScript 代码进行压缩和混淆。其核心功能在于通过在 webpack 的运行时钩子 optimizeChunkAssets 中注册，实现了代码优化过程。在 apply 函数中，它获取 compilation 实例，并通过 tapPromise 注册一个异步任务，当 webpack 执行优化阶段时，每个 chunk 会触发这个任务，执行 minify 函数进行压缩处理。
optimise 函数是实际的任务处理入口，它负责具体的优化流程。函数内部，scheduleTask 负责并行处理，如果开启 parallel 模式，会利用jest-worker提供的线程池进行并发工作，线程池管理复杂，根据 node 版本不同采用 worker_threads 或 child_process。minify 函数则是压缩和混淆代码的核心操作，它直接使用 terser 库完成任务。
总的来说，terser-webpack-plugin 的优化流程包括在 webpack 的优化阶段对代码进行压缩，使用 Jest 的 worker 线程池进行并行处理，以及通过 terser 库的实际压缩操作。理解这些核心环节，可以帮助开发者更深入地掌握该插件的使用和工作原理。