翻译 src/content/contribute/plugin-patterns.mdx

Author: 王文明

src/content/contribute/plugin-patterns.mdx

@@ -1,37 +1,39 @@
 ---
-title: Plugin Patterns
+title: 插件模式
 sort: 5
 contributors:
   - nveenjain
   - EugeneHlushko
   - benglynn
+translators:
+  - jsbugwang
 ---
 
-Plugins grant unlimited opportunity to perform customizations within the webpack build system. This allows you to create custom asset types, perform unique build modifications, or even enhance the webpack runtime while using middleware. The following are some features of webpack that become useful while writing plugins.
+在 webpack 构建系统中，能够通过插件进行定制，这赋予了无限的可能性。这使你可以创建自定义资源类型(asset type)，执行唯一的构建修改(build modification)，甚至可以使用中间件来增强 webpack 运行时。下面是在编写插件时非常有用一些 webpack 的功能。
 
-## Exploring assets, chunks, modules, and dependencies $#exploring-assets-chunks-modules-and-dependencies$
+## 检索遍历资源(asset)、chunk、模块和依赖 $#exploring-assets-chunks-modules-and-dependencies$
 
-After a compilation is sealed, all structures within the compilation may be traversed.
+在执行完成编译的封存阶段(seal)之后，编译(compilation)的所有结构都可以遍历。
 
 ```javascript
 class MyPlugin {
   apply(compiler) {
     compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
-      // Explore each chunk (build output):
+      // 检索每个（构建输出的）chunk：
       compilation.chunks.forEach((chunk) => {
-        // Explore each module within the chunk (built inputs):
+        // 检索 chunk 中（内置输入的）的每个模块：
         chunk.getModules().forEach((module) => {
-          // Explore each source file path that was included into the module:
+          // 检索模块中包含的每个源文件路径：
           module.buildInfo &&
             module.buildInfo.fileDependencies &&
             module.buildInfo.fileDependencies.forEach((filepath) => {
-              // we've learned a lot about the source structure now...
+              // 我们现在已经对源结构有不少了解……
             });
         });
 
-        // Explore each asset filename generated by the chunk:
+        // 检索由 chunk 生成的每个资源(asset)文件名：
         chunk.files.forEach((filename) => {
-          // Get the asset source for each file generated by the chunk:
+          // 获取 chunk 生成的每个文件的资源源代码(asset source)：
           var source = compilation.assets[filename].source();
         });
       });
@@ -43,21 +45,21 @@ class MyPlugin {
 module.exports = MyPlugin;
 ```
 
-- `compilation.modules`: A set of modules (built inputs) in the compilation. Each module manages the build of a raw file from your source library.
+- `compilation.modules`：编译后的（内置输入的）模块数组。每个模块管理控制来源代码库(source library)中的原始文件(raw file)的构建。
 
-W> **Deprecation warning**: Array functions will still work.
+W> **弃用警告**: 数组函数依然可用。
 
-- `module.fileDependencies`: An array of source file paths included into a module. This includes the source JavaScript file itself (ex: `index.js`), and all dependency asset files (stylesheets, images, etc) that it has required. Reviewing dependencies is useful for seeing what source files belong to a module.
-- `compilation.chunks`: A set of chunks (build outputs) in the compilation. Each chunk manages the composition of a final rendered assets.
+- `module.fileDependencies`：模块中引入的源文件路径构成的数组。这包括源 JavaScript 文件本身（例如：index.js）以及它所需的所有依赖资源文件（样式表、图像等）。审查依赖，可以用于查看一个模块有哪些从属的源文件。
+- `compilation.chunks`：编译后的（构建输出的）chunk 集合。每个 chunk 所管理控制的最终渲染资源的组合。
 
-W> **Deprecation warning**: Array functions will still work.
+W> **弃用警告**: 数组函数依然可用。
 
-- `chunk.getModules()`: An array of modules that are included into a chunk. By extension, you may look through each module's dependencies to see what raw source files fed into a chunk.
-- `chunk.files`: A Set of output filenames generated by the chunk. You may access these asset sources from the `compilation.assets` table.
+- `chunk.getModules()`：chunk 中引入的模块构成的数组。通过扩展(extension)可以审查每个模块的依赖，来查看哪些原始源文件被注入到 chunk 中。
+- `chunk.files`：chunk 生成的输出文件名构成的集合。你可以从 `compilation.assets` 表中访问这些资源来源。
 
-### Monitoring the watch graph $#monitoring-the-watch-graph$
+### 监听观察图(watch graph)的修改 $#monitoring-the-watch-graph$
 
-While running webpack middleware, each compilation includes a `fileDependencies` `Set` (what files are being watched) and a `fileTimestamps` `Map` that maps watched file paths to a timestamp. These are extremely useful for detecting what files have changed within the compilation:
+运行 webpack 中间件时，每个编译包括一个 `fileDependencies` `Set`（正在观察哪些文件）和一个 `fileTimestamps` `Map`，它将被观察的文件路径映射到时间戳。这可以用于检测编译中哪些文件已经修改：
 
 ```javascript
 class MyPlugin {
@@ -85,15 +87,15 @@ class MyPlugin {
 module.exports = MyPlugin;
 ```
 
-You may also feed new file paths into the watch graph to receive compilation triggers when those files change. Add valid file paths into the `compilation.fileDependencies` `Set` to add them to the watched files.
+还可以将新文件路径添加到观察图(watch graph)中，以在这些文件修改时，接收消息和重新触发编译。只要将有效的文件路径推送到 `compilation.fileDependencies` `Set` 中，就可以将其添加到观察图中。
 
-T> The `fileDependencies` `Set` is rebuilt in each compilation, so your plugin must add its own watched dependencies into each compilation to keep them under watch.
+T> The `fileDependencies` `Set` 在每次编译时都会重新构建，因此你的插件必须将自己要观察的依赖都推送到每次编译中，以使它们都处于观察中。
 
-W> Since webpack 5, `compilation.fileDependencies`, `compilation.contextDependencies` and `compilation.missingDependencies` are now a `Set` instead of a `Sortable Set` and thus no longer sorted.
+W> 从 webpack v5 开始, `compilation.fileDependencies`, `compilation.contextDependencies` 和 `compilation.missingDependencies` 是 `Set` 类型，而不是 `Sortable Set` ，因此不再是有序的了。
 
-## Changed chunks $#changed-chunks$
+## 监听 chunk 的修改 $#changed-chunks$
 
-Similar to the watch graph, you can monitor changed chunks (or modules, for that matter) within a compilation by tracking their hashes.
+类似于观察图(watch graph)，监听 chunk（或者模块，就当前情况而言）的修改也很简单，通过在编译时跟踪它们的 hash 来实现。
 
 ```javascript
 class MyPlugin {