Webpack

TL;TR

webpack://栏目，会在 webpack dev 环境下，chrome devtools 中 source 的树结构中展示，内容是经过 source-map 解析后的源文件路径关系及代码信息，如果文件的 source-map 未能获取，则会展示 编译后的路径结构及代码信息。
webpack:// protocol/schema 是 webpack 自己制定的一套文件规整方案。与本地文件 file:// 略有不同。
通过添加以下配置，可以采用真实的文件路径进行展示：
image.png
由于 webRoot 不一定就是当前 dev-server启动的pwd，所以使用真实文件路径，会更加直观，明确源文件的位置。
image.png
无论 哪种 展示方式，需要在 dev 环境中展示 代码源信息，需要让 source-map 及 源文件，都能被 webpack 接收，同时若需要vscode调试支持，则需要让 source-map 的 webRoot（server启动位置，或静态目录生成位置） 被正确设置。

webpack:// prefix & source-map

获取 webpack link address：
image.png
webpack:///../core/src/effects/index.ts
webpack:///./src/array-cards/style.less?bb93
webpack:////Users/xxxx/github/formily/node_modules/lodash/toNumber.js
https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate
可以通过 配置 自定义 webpack link address 的生成。
默认规则

  1. output: {
  2.   devtoolModuleFilenameTemplate:
  3.     'webpack://[namespace]/[resource-path]?[loaders]',
  4. },

https://github.com/angular/angular-cli/issues/11058
file:///[absolute-resource-path]
调整 webpack 的 source 展示方式，直接使用 raw data，也就是真实的文件地址信息。
https://gist.github.com/jarshwah/389f93f2282a165563990ed60f2b6d6c
vscode launch 中 sorce-map 前缀+uri 的定向：

  1.  // we have multiple js source folders, so some source maps are still generated with webpack protocol links. Don't know why?
  2. "sourceMapPathOverrides": {  // if you override this, you MUST provide all defaults again
  3.     "webpack:///./~/*": "${webRoot}/node_modules/*",  // a default
  4.     "webpack:///./*":   "${webRoot}/js-src/*",        // unsure how/why webpack generates ./links.js
  5.     "webpack:///../*": "${webRoot}/js-src/*",         // unsure how/why webpack generates ../links.js
  6.     "webpack:///*":     "*"                           // a default, catch everything else
  7. }

file:// 为本地文件 protocol，file:/// 即访问本地文件系统
image.png

webpack:// 是什么

webpack:// 前缀是表示此处是 source-map 的地址。由于 source-map 可以是直接可读取的已有文件，也可能是dev过程中生成的文件，所以其实不是真实的文件路径，而是一个虚拟的文件结构。
之所以要搞一个这个东西，是为了解决source-map指向文件目录不真实的问题。
https://github.com/webpack/webpack/issues/2395#issuecomment-215684476
image.png

If you use [resource-path] or [absolute-resource-path] the paths will be raw paths on fs. Regarding ~: webpack replaces node_modules with ~ for readablity.

于是可以猜测，之所以 source-map-loader 要将 源文件 sources 引入 webpack，就是为了获得 真实的文件目录。
同样此处也使用 ～ 来代指 node_modules

VSCode

debug: webRoot

webpack:///../core/src/effects/index.ts
任意webpack link address（webpack://）开头都是/，/代表 webRoot 的绝对路径，类比服务器静态目录。
上例的路径，应该有一套解析方式，比如 / 后跟相对路径，会进行类似 path.resolve 组合操作，绝对路径，则直接使用，暂存疑？
所以如果不是默认的情况（workspaceFolder），需要进行设置，而dev环境中，webRoot 的路径就是 server 启动的路径，也就是，yarn start 的 pwd。
同理 publicPath 也是与路径解析相关，起到类似 补充webRoot 的意思，为了将一些其他 url 地址的文件进行引入，将 / 转化为 webRoot/publicPath，继而拼接成想要的 url，让静态文件在静态服务器上正确获取。

Debug: Diagnose

快速筛查debug问题，及文件加载是否正确
image.png
可获取源文件及source-map加载信息。

webpack

souce-map-loader

source-map-loader 不仅会将 source-map 作为资源引入，同时如果此时 源文件可获取（sources，源代码文件）
image.png
源代码文件也会被引入 webpack 环境中，并参与后续的编译：
image.png
查看源文件是否被引入：
通过 diagnose 查看
image.png
源文件未引入会是lib文件，此时有map也能debug，但是不会响应源文件修改：
且对 vscode 中源文件设置断点，也不会响应，因为此时真正的执行文件是 lib 下的内容，原因是 dev环境中 经过 webpack 的编译，相当于在 webpack:// 这个虚拟位置生成了一个 webRoot，此时所有的文件内容，包括源文件解析，都是从此目录中获取，如果外部源文件未被 webpack 囊括进来，也就无法实现源文件映射了。
image.png
所以虽然被视为是一个 bug，但是却能够在 lerna 库中实现，跨包的 HMR，也就不需要对包的单独调试，而可以进行联调。
且如果在 源文件 中设置 vscode 断点，vscode 会同时设置在所有 dist/lib/esm以及源文件 等内容上（机制未知），这样无论调用何文件，都能实现正确的断点触发，且存在 map 即可跳转正确 源代码 处。
image.png
vscode 的断点响应，来自 debugger 对 source-map 的解析，获取源文件信息，继而执行文件执行到指定位置后，触发对源文件设置对断点：
相当于虽然在执行 编译后的内容，但是每一步都可以映射到 源代码 中
image.png
所以只要能正确获取源文件及source-map，即可进行源文件断点触发。
source-map-loader 之所以需要作为 pre-loader，是因为文件进行执行前，会被 minified，如果是存在 sourceMap
URL这类信息就会被删除，所以就导致从 js 文件中获取不到 map 文件，继而文件分析链就会断开。
souce-map-loader 不仅加载了 source-map 让执行文件可以被 mapping，甚至在能获取到 源文件 时，将源文件加入 webpack 的监听区，监听变化实时编译，也就是相当于直接 使用了源文件，而不是之前引入的 执行文件（compiled）。需要进行更多验证。这样就相当于对源文件的source-map后续也是基于 webpack 的编译流程，实时进行了。
如果仅需要源文件调试展示，只需执行文件加map，如需要源文件调试支持修改，需要执行文件+map+源文件。
https://github.com/webpack-contrib/source-map-loader/blob/master/src/index.js

NPM

本地调试

除了使用 link，也可直接使用 file: 进行包引入

  1.   "dependencies": {
  2.     "my-typescript-library": "file:../my-typescript-library"
  3.   },

CSS

Flex

https://twitter.com/voraciousdev/status/1419769440938364928
原文：
https://voracious.dev/a-practical-cheat-sheet-for-css-flexbox
image.png

WebSite

HashNode

挺好的静态blog生成站，可惜无国内服务器
https://hashnode.com/?source=signup-prompt