webpack是如何访问文件系统和写入文件的?

How does webpack access file system and write files?

我无法从 webpack 的网站或他们的包依赖中弄清楚 webpack 实际上是如何在本地文件系统上读取和写入文件的。

我也想写一些自动化脚本来处理一些源代码文件,可以借鉴一下webpack的工作原理。

他们库中是否已经打包了一些二进制文件?那运行怎么跨平台呢?是 运行ning 在 Node 上吗?请赐教!

Is it running on Node?

是的,它是 Node.js library/package。

How Webpack actually reads and writes files on the local file system?

它利用本机fs模块来读写文件。要在 dev 模式期间连续观察文件的变化,它使用 watchpack。此外,如果您使用 Webpack Dev Server,则它不会将输出文件写入文件系统。它使它们 in-memory 并使用 connect 之类的 中间件 从内存中提供文件。

...to process some of the source code files

Webpack 使用 acorn 库来解析 JavaScript AST 以理解 JS 语法。

I would also like to write some automation script...

如果您打算处理一些源代码文件,您有两个选择 - 加载器和插件。加载程序在单个文件级别工作并通过加载程序管道。把它想象成一个 code-transpiler ,其中一种语言的文件被转换成另一种或类似的语言(例如 typescript 到 JS)。加载器是无状态的,实现起来相对简单。例如,sass-loader 会将 SCSS 转换为 CSS,然后通过 css-loader 解析所有 @import 语句。

另一方面,插件更高级但实施起来更复杂。插件在整个编译过程级别上工作,并通过利用编译器 hooks/events 来实现。因此,当您需要随时处理多个文件时,插件可能是最佳选择。例如,CSS 提取插件需要将 CSS 从多个文件中提取到一个文件中。你需要插件。