利用webpack搭建mock API服务

利用webpack实现mock api，需要用到插件webpack-api-mocker，webpack-api-mocker已经改名成mocker-api 请参考最新的 https://www.npmjs.com/package/mocker-api

项目目录结构

安装

https://www.npmjs.com/package/webpack-api-mocker

npm install webpack-api-mocker --save-dev

在`build/webpack.dev.conf.js`中引入`webpack-api-mocker`

const apiMocker = require('webpack-api-mocker');

在devServer参数中设置before，我们把api接口定义在mock目录下的proxy

...
devServer: {
        // 内容路径
        contentBase: path.join(__dirname, "../src"),
        // gzip压缩
        compress: true,
        // 端口
        port: 9000,
        historyApiFallback: true,// 如果为 true ，页面出错不会弹出 404 页面
        // api mocker
        before(app) {
            apiMocker(app, path.resolve(__dirname, "../mock/proxy"))
        }
    },
...

注意： apiMocker第二个参数，必须是字符串路径，即上面path.resolve(__dirname, "../mock/proxy")这一串

附: proxy代码，我们可以把不同的API通过文件拆开来

利用_proxy参数，可以代理相关的请求接口。如我们本地开发，但数据需要真实环境的数据，这个真实环境可能是测试服务器，可能是后台开发自己的电脑，这对真实场景的调试是非常有用的

貌似_proxy的代理优先级不生效，所以这里通过环境变量process.env.proxy设置不同的proxy配置

mock/proxy.js

const USER = require("./user");
const _proxy = process.env.proxy == "true";
console.log(_proxy);
let proxy = {};
if (_proxy) {
    proxy = {
        /**
         * 代理远程服务器联调
         */
        _proxy: {
            proxy: {
                // "/repos/*": "https://api.github.com/",
                // "/:owner/:repo/raw/:ref/*": "http://127.0.0.1:2018"
                "/weixin/*": "http://172.20.21.21:8086/"
            },
            changeHost: true
        }
    };
} else {
    proxy = {
        /**
         * 用户相关api
         */
        ...USER
    };
}
module.exports = proxy;

mock/user.js

const USER = {
    'GET /weixin/user': { id: 1, username: 'kenny', sex: 6 }
}
module.exports = USER;

修改package.json，定义`dev`,`proxy`

本地开发，启用npm run dev
需要测试真实数据时，启用npm run proxy

"scripts": {
        "dev": "cross-env proxy=false webpack-dev-server --hot --color --config build/webpack.dev.conf.js",
        "proxy": "cross-env proxy=true webpack-dev-server --hot --color --config build/webpack.dev.conf.js",
        "build": "webpack --config build/webpack.prod.conf.js",
        "server": "http-server ./dist -a 127.0.0.1 -p 9000 --proxy http://172.88.88.21:8086/"
    },