1. 以React为例，准备

• 使用create-react-app创建的项目是不会直接看到webpack配置的，所以我们需要先执行命令npm run eject将配置还原

2. 核心步骤

接下来很简单，找到/config/webpackDevServer.config.js文件，这个文件就是webpack本地服务器的配置文件，而这个文件中最重要的一个部分就是这里：

// ...
module.exports = function (proxy, allowedHost) {
    return {
        // 这里是配置
        before(app, server) {
            if (fs.existsSync(paths.proxySetup)) {
                // This registers user provided middleware for proxy reasons
                require(paths.proxySetup)(app);
            }

            // This lets us fetch source contents from webpack for the error overlay
            app.use(evalSourceMapMiddleware(server));
            // This lets us open files from the runtime error overlay.
            app.use(errorOverlayMiddleware());

            // This service worker file is effectively a 'no-op' that will reset any
            // previous service worker registered for the same host:port combination.
            // We do this in development to avoid hitting the production cache if
            // it used the same host and port.
            // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
            app.use(noopServiceWorkerMiddleware());
     }
}

本质上就是一个由express搭建的服务器，到这里其实就很简单了，不仅仅是搭建graphQL，任何express上可以使用的几乎都能在这里添加

3. 简单实现graphQL

• 模拟数据graphData.json

{
    "1": {
        "id": "1",
        "name": "Dan"
    },
    "2": {
        "id": "2",
        "name": "Marie"
    },
    "3": {
        "id": "3",
        "name": "Jessie"
    }
}

• 配置文件webpackDevServer.config.js

// ....
// mockData  自定义模拟数据
const graphData = require('../mock/graphData.json')

// graphQL  引入必要依赖 当然要先(npm安装依赖)
const graphql = require('graphql')
const graphqlHTTP = require('express-graphql')
// ...
const userType = new graphql.GraphQLObjectType({
    name: 'User',
    fields: {
        id: { type: graphql.GraphQLString },
        name: { type: graphql.GraphQLString },
    }
})

const schema = new graphql.GraphQLSchema({
    query: new graphql.GraphQLObjectType({
        name: 'Query',
        fields: {
            user: {
                // 使用上面定义的 userType
                type: userType,
                // 定义所接受的 user 参数
                args: {
                    id: { type: graphql.GraphQLString }
                },
                // 当传入参数后 resolve 如何处理回传 data
                resolve: function (_, args) {
                    return graphData[args.id];
                }
            }
        }
    })
})
app.use('/graphql', graphqlHTTP({
  schema: schema,
  pretty: true
}));
// 或者这样
// post同理
// app.get('/graphql', graphqlHTTP({ schema: schema, pretty: true }))

4. 验证

1. npm run start启动服务器
2. 在浏览器中输入http://localhost:3000/graphql?query={user(id:1){name}}(具体端口实际情况而定)
   
   可以看到已经可以正常返回数据了

5. 总结步骤

1. 先暴露出react配置文件
2. 找到webpack本地服务器配置文件
3. 安装graphQL相关依赖
4. 在before字段中配置服务
5. 和正常的启动一样使用npm run start启动本地服务器