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使用的看源高防欧模网源码可共享 ESLint 配置。npm link

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

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

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

       使用babel-loader打包TypeScript

       参考babel官网

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

       让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、watchservice源码Babel、依赖）

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

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

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

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

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功能。