前言
在现代 Web 开发中，GraphQL 已成为前端开发的常用技术之一。GraphQL Code Generator 是一个工具，能够自动生成带有类型声明的代码，可用于类型检查、IDE 提示和代码自动补全等。而 graphql-codegen-webpack 又是一个基于 GraphQL Code Generator 的包，可以方便地与 Webpack 集成。在本篇文章中，我们将详细介绍如何使用 graphql-codegen-webpack。
安装
使用 NPM 或 Yarn 安装 graphql-codegen-webpack：
npm install --save-dev graphql-codegen-webpack # 或者使用 Yarn yarn add --dev graphql-codegen-webpack
配置
1. 创建配置文件
在项目根目录下创建一个名为 graphql-codegen.yml 的文件，并将配置信息填入其中。下面是一个示例配置文件：
overwrite: true
schema: http://localhost:4000/graphql
documents: './src/**/*.graphql'
generates:
./src/generated/types.ts:
plugins:
- 'typescript'
- 'typescript-operations'其中，overwrite 表示是否覆盖已有的文件（默认为 false）。schema 表示该项目的 GraphQL Schema 的 URL 地址。documents 表示 GraphQL 语句所在的目录或目录数组，支持 glob 格式的通配符。generates 则表示生成的文件路径以及使用的插件列表。
这里为了方便，我们把 graphql-codegen.yml 文件放在项目根目录下。如果你使用的是其他的配置文件名或存放路径，需要在 webpack 配置中指定。
2. 配置 webpack
在 webpack 配置文件中，我们需要引入 graphql-codegen-webpack 并在插件列表中添加它。下面是一个 webpack 配置文件的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- - --------------------------- - - -----------------------------------
-------------- - -
-- ----
------ -----------------
-- --------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
-- -- ------------ -- ---------- --
----- --------
-------- ---------------
---- -
------- ---------------
--
--
--
--
-------- -
-- -- --------------------------- --
--- -----------------------------
----------- ----------------------- -----------------------
---
--
--在这个配置文件中，我们首先引入了 path 和 GraphQLCodeGenWebpackPlugin 包。接着，在 plugins 列表中添加了实例化的 GraphQLCodeGenWebpackPlugin，并传入 graphql-codegen.yml 文件的路径。
生成代码
一旦我们完成了上述配置，就可以通过执行 Webpack 命令来生成代码文件了。在配置好 graphql-codegen-webpack 后，你需要在控制台运行以下命令：
npx webpack --config webpack.config.js
其中，webpack.config.js 是我们刚才配置的 webpack 配置文件的名称。如果你使用其他名称，需相应地更改命令行中的文件名。
当代码都成功生成后，我们可以在 ./src/generated 目录下找到包含 types.ts 的文件夹，里面就是生成的 TypeScript 类型声明文件。
总结
至此，我们对 graphql-codegen-webpack 的使用方法已经非常详细地介绍了。如果你正在开发 GraphQL 应用程序，并且想要在代码中强制实施类型安全和 IDE 提示，那么 GraphQL Codegen 工具以及我们刚刚介绍的 graphql-codegen-webpack 包都是非常好的选择。如果您有任何问题或疑问，请在评论区留言，我将尽快回复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66cf2