编写者指南

以下部分包含了您需要了解的关于编辑和格式化本网站内容的所有信息。在开始编辑或添加内容之前,请务必进行一些研究。有时最困难的部分是找到内容应放置的位置并确定它是否已经存在。

流程

  1. 如果文章链接到相关问题,请检查该问题。
  2. 点击 edit 并扩展结构。
  3. 提交 PR 更改。

YAML Frontmatter

每篇文章顶部都包含一个使用 YAML Frontmatter 编写的小节。

---
title: My Article
group: My Sub-Section
sort: 3
contributors:
  - [github username]
related:
  - title: Title of Related Article
    url: [url of related article]
---

我们来逐一解释这些内容

  • title: 文章的名称。
  • group: 子章节的名称
  • sort: 文章在其所属章节(或子章节,如果存在)中的顺序。
  • contributors: 为本文贡献的 GitHub 用户名列表。
  • related: 任何相关的阅读材料或有用的示例。

请注意,related 会在页面底部生成一个延伸阅读部分,而 contributors 会在其下方生成一个贡献者部分。如果您编辑了文章并希望获得认可,请随时将您的 GitHub 用户名添加到 contributors 列表中。

文章结构

  1. 简要介绍 - 一到两段,以便您了解其内容和原因的基本概念。
  2. 概述其余内容 – 内容将如何呈现。
  3. 主要内容 - 讲述您承诺要讲述的内容。
  4. 结论 - 总结您所讲述的内容并回顾主要观点。

排版

  • 在句子的开头,Webpack 可以写成大写字母 W。(来源
  • loader 使用反引号包裹并使用 kebab-case 命名:css-loader, ts-loader, …
  • plugin 使用反引号包裹并使用 camel-case 命名:BannerPlugin, NpmInstallWebpackPlugin, …
  • 使用 "webpack 2" 来指代特定的 webpack 版本 ("webpack v2")
  • 使用 ES5; ES2015, ES2016, … 来指代 ECMAScript 标准 (ES6, ES7)

格式

代码

语法: ```javascript … ```

function foo() {
  return 'bar';
}

foo();

引用

在代码片段和项目文件中使用单引号(.jsx, .scss 等)

- import webpack from "webpack";
+ import webpack from 'webpack';

以及内联反引号中

正确

将值设置为 'index.md'...

不正确

将值设置为 "index.md"...

列表

  • Boo
  • Foo
  • Zoo

列表应按字母顺序排列。

表格

参数解释输入类型默认值
--debug将 loader 切换到调试模式booleanfalse
--devtool为打包的资源定义 source map 类型string-
--progress以百分比形式打印编译进度booleanfalse

表格也应按字母顺序排列。

配置属性

配置属性也应按字母顺序排列

  • devServer.compress
  • devServer.hot
  • devServer.static

引用

块引用

语法: >

这是一个块引用。

提示

语法: T>

语法: W>

语法: ?>

假设与简化

在编写文档时不要作任何假设。

- You might already know how to optimize bundle for production...
+ As we've learned in [production guide](/guides/production/)...

请不要假设事情很简单。避免使用 'just'、'simply' 之类的词语。

- Simply run command...
+ Run the `command-name` command...

配置默认值与类型

务必为所有文档选项提供类型和默认值,以确保文档易于访问且编写良好。我们在为文档选项命名后添加类型和默认值

configuration.example.option

string = 'none'

其中 = 'none' 表示给定选项的默认值为 'none'

string = 'none': 'none' | 'development' | 'production'

其中 : 'none' | 'development' | 'production' 列举了可能的类型值,在这种情况下,三个字符串是可接受的:'none''development''production'

在类型之间使用空格来列出给定选项的所有可用类型

string = 'none': 'none' | 'development' | 'production' boolean

要标记数组,请使用方括号

string [string]

如果 array 中允许使用多种类型,请使用逗号

string [string, RegExp, function(arg) => string]

要标记函数,请在可用时也列出参数

function (compilation, module, path) => boolean

其中 (compilation, module, path) 列出了所提供的函数将接收的参数,而 => boolean 表示函数的返回值必须是 boolean 类型。

要将 Plugin 标记为可用的选项值类型,请使用 Plugin 的驼峰式命名标题

TerserPlugin [TerserPlugin]

这意味着该选项期望一个或少数 TerserPlugin 实例。

要标记数字,请使用 number

number = 15: 5, 15, 30

要标记对象,请使用 object

object = { prop1 string = 'none': 'none' | 'development' | 'production', prop2 boolean = false, prop3 function (module) => string }

当对象的键可以有多种类型时,请使用 | 列出它们。这是一个示例,其中 prop1 可以是字符串,也可以是字符串数组

object = { prop1 string = 'none': 'none' | 'development' | 'production' | [string]}

这使我们能够显示默认值、枚举和其他信息。

如果对象的键是动态的、用户定义的,请使用 <key> 来描述它

object = { <key> string }

选项简表及其类型

有时,我们希望在列表中描述对象和函数的某些属性。在适用情况下,直接将类型添加到列出属性的列表中

  • madeUp (boolean = true): 简短描述
  • shortText (string = 'i am text'): 另一个简短描述

可以在 EvalSourceMapDevToolPlugin 页面options 部分找到示例。

添加链接

请使用相对 URL(例如 /concepts/mode/)链接我们自己的内容,而不是使用绝对 URL(例如 https://webpack.js.cn/concepts/mode/)。

2 贡献者

pranshuchittoraEugeneHlushko