1.Webpack入门到精通 五（常用配置）
2.webpack 4 源码主流程分析（十一）：文件的查查生成
3.Webpack进阶less-loader、css-loader、看源style-loader源码解析
4.一文看懂 webpack 的打包所有 source map ！🤔
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使用的看源php discuz源码可共享 ESLint 配置。npm link
让webpack可以感知到eslint的打包配置，从而在编译的源码过程中提示报错信息
在没加eslint-webpack-plugin之前，尽管编辑器中eslint报错，查查但在运行yarn build时，看源它仍能编译成功。打包如下图所示
加完之后的源码情况，此时不仅eslint报错，查查webpack构建时也会在控制台报错，看源这样很好地使用了eslint
使用babel-loader打包TypeScript
参考babel官网
添加一个test.tsx，打包并在index.js中引入，声音 c源码以下结果编译成功
让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、135 源码 下载Babel、依赖）
webpack 4 源码主流程分析（十一）：文件的生成
本文深入分析了 Webpack 4 中文件生成的具体流程。在资源写入文件阶段，通过一系列优化和处理，最终返回到 Compiler.js 的 compile 方法，其中 Compiler 的属性 _lastCompilationFileDependencies 和 _lastCompilationContextDependencies 被赋予了 fileDependencies 和 contextDependencies。紧随其后的是创建目标文件夹的过程，该操作通过 outputPath 属性配置，结合 mkdirp 函数完成。
在创建目标文件并写入阶段，通过 asyncLib.forEachLimit 方法并行处理每个文件资源，实现路径拼接、源码转换为 buffer，最后写入真实路径的文件。对于不同类型的sdwebimage源码分析 source 实例，如 CachedSource、ConcatSource 和 ReplaceSource，其处理逻辑各不相同，但最终目标都是获取替换后的字符串并合并返回 resultStr。所有文件创建写入完成后，执行回调，触发Compiler.afterEmit:hooks，进一步设置 stats 并打印构建信息。
至此，构建流程全部结束。通过本文的分析，我们可以更直观地了解 Webpack 4 中文件生成的具体实现细节，为深入理解 Webpack 的工作原理和优化提供理论支持。本章小结，下章将解析打包后的qbittorrent源码安装文件，敬请期待。
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 的所有 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功能。
