添加自定义 webpack 配置
在创建自定义 webpack 配置之前，请检查 Gatsby 插件库中是否有已构建的插件可以满足您的用例。如果还没有，并且您的用例是通用的，请考虑将您的插件贡献给 Gatsby 插件库，以便其他人（包括您自己）可以使用。
要添加自定义 webpack 配置，请在您的根目录中创建一个（如果尚不存在）gatsby-node.js 文件。在该文件中，导出一个名为 onCreateWebpackConfig 的函数。
当 Gatsby 创建其 webpack 配置时，将调用此函数，允许您使用 webpack-merge 修改默认 webpack 配置。
Gatsby 会执行多个 webpack 构建，其配置略有不同。Gatsby 将每种构建类型称为“阶段”。存在以下阶段：
- develop：在运行
gatsby develop命令时。包含用于热重载和将 CSS 注入页面的配置。 - develop-html：与 develop 相同，但 Babel 配置中不包含 react-hmre，用于渲染 HTML 组件。
- build-javascript：生产 JavaScript 和 CSS 构建。创建路由 JavaScript 包以及 JavaScript 和 CSS 的公共块。
- build-html：生产构建静态 HTML 页面。
有关源代码，请查看 webpack.config.js。
Gatsby 仓库中有许多使用此 API 的插件可供参考，例如 Sass、TypeScript、Glamor 等等！
示例
以下是通过 DefinePlugin 和 less-loader 添加额外全局变量的示例：
绝对导入
您可以将 import Header from '../../components/header' 替换为 import Header from 'components/header'，从而实现绝对导入。
您可以在官方 webpack 文档中找到更多关于 resolve 和其他选项的信息。
使用 yarn 导入非 webpack 工具
请注意，绝对导入仅适用于 webpack 解析，而不适用于其他工具，例如 ESLint 或 TypeScript。但如果您正在使用 yarn，那么最佳实践是将您的导入设置在 package.json 中，如下所示：
修改 Babel 加载器
如果您想对 node_modules 的部分内容进行转译，则需要此功能。