皮皮网

1.【Webpack进阶】less-loader、查查css-loader、看源style-loader源码解析
2.webpack 4 源码主流程分析（十一）：文件的打包生成
3.Webpack入门到精通 五（常用配置）
4.webpack之devtool详解
5.一文看懂 webpack 的所有 source map ！🤔

【Webpack进阶】less-loader、源码css-loader、查查style-loader源码解析

       深入解析 Webpack 样式 loader

       本文将通过探讨 less-loader、看源javafx布局源码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 模块，dofilter源码供其他 loader 使用。

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

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

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

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

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

       在创建目标文件并写入阶段，通过 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是jd源码什么？二、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之devtool详解

       Webpack的Devtool详解

       Webpack的Devtool是开发者在开发和调试过程中重要的工具之一，它可以帮助开发者更好地理解和调试代码。Devtool提供了多种不同的配置选项，用于生成源代码映射，以便于开发者在浏览器控制台中直接查看源代码，从而更有效地定位和解决代码中的问题。

       一、什么是Devtool？

       Webpack的Devtool是一个配置选项，允许开发者在构建过程中生成源代码映射。源代码映射是一种文件，它将编译后的代码映射回原始源代码，以便于开发者调试。Devtool的不同配置选项会生成不同类型的源代码映射，适用于不同的开发场景。

       二、Devtool的主要配置选项

       1. eval模式：这是最简单的源代码映射形式，它直接在控制台输出源代码。这种模式下，不需要生成额外的文件，但生成的源代码映射相对较小且不持久。

       2. source-map模式：在这种模式下，Webpack会生成一个独立的.map文件来存储源代码映射信息。这种模式的源代码映射比较详细，但会增加构建时间。

       3. inline-source-map模式：与source-map模式类似，但源代码映射信息会直接嵌入到构建后的文件中。这种模式便于传输和分发构建后的文件，但同样会增加文件大小。

       4. cheap-module-eval-source-map模式：适用于模块化的项目，能够提供模块级别的调试信息。它在开发和调试阶段很有用，但生成的源代码映射相对较小。

       三、如何选择适合的Devtool配置？

       选择Devtool的配置取决于项目的需求和开发阶段。在开发阶段，为了快速迭代和调试代码，可以选择生成更详细的源代码映射；而在生产环境，为了优化性能和文件大小，可以选择生成较小的源代码映射或者不使用源代码映射。常见的做法是在开发阶段使用如eval或cheap-module-eval-source-map等详细的配置选项，而在生产环境使用source-map或inline-source-map等更精简的配置选项。

       总之，Webpack的Devtool是开发者在开发和调试过程中的重要工具，通过合理配置Devtool，可以大大提高开发效率和代码质量。

一文看懂 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功能。