webpack配置mockjs，开发阶段对接口进行mock

1、先准备项目

运行 npx create-react-app projectName创建一个 react 项目，为了不暴露 webpack 的配置，我们不运行 npm run eject命令暴露配置，因此我们还需要安装 react-app-rewired 和 customize-cra 来进行对项目的 webpack 配置文件进行覆盖。 

在根目录下创建 config-overrides.js 配置文件。

 

 

2、接下来就是开始配置打包设置和相关代码

先配置webpack打包配置文件 config-overrides.js，config-overrides.js 内容如下，mock配置在最后使用 setupMiddlewaresd 进行mock配置，其他的配置无需关心

const Cra = require('customize-cra');
const {override, fixBabelImports, addWebpackPlugin, addLessLoader, addWebpackAlias, overrideDevServer, watchAll} = Cra;
const UglifyjsWebpack = require('uglifyjs-webpack-plugin');
const path = require('path');
const config = {
    webpack: override(
        // 按需引入antd组件（引入 antd 样式文件，需要下载 babel-plugin-import）
        // fixBabelImports("import", {
        //     libraryName: "antd",
        //     libraryDirectory: "es",
        //     style: true,
        // }),

        // 别名
        addWebpackAlias({
            "@": path.resolve(__dirname, 'src')
        }),

        // 添加less支持，默认支持sass，因此只需要安装 sass包就可以了，不需要对sass进行配置
        addLessLoader({
            lessOptions: {
                strictMath: true,
                javascriptEnabled: true,
                // Optionally adjust URLs to be relative. When false, URLs are already relative to the entry less file.
                relativeUrls: false,
                modifyVars: { '@primary-color': '#A80000' },
                // cssModules: {
                //   // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
                //   localIdentName: "[path][name]__[local]--[hash:base64:5]",
                // }
            }
        }),

        // 删除 console和debugger
        // 注意是production环境才启动该插件用于删除 console和debugger
        process.env.NODE_ENV === 'production' && addWebpackPlugin(
            new UglifyjsWebpack({
                // 打包缓存开启
                cache: true,
                // 开启多线程打包
                parallel: true,

                uglifyOptions: {
                    // 删除警告
                    warnings: true,

                    // 压缩
                    compress: {
                        // 删除console
                        drop_console: true,

                        // 删除debugger
                        drop_debugger: true
                    }
                }
            })
        ),
    )
}


if(process.env.NODE_ENV === 'development'){
    config.devServer = overrideDevServer((config)=>{
        return {
            ...config,

            // 配置mock
            setupMiddlewares: require('./src/mocks/index.js'),
        }
    }, watchAll());
}
module.exports = config;

 

3、在src目录下创建mocks目录，并在mocks目录下创建index.js文件 mocks/index.js 文件内容如下：

const Test= require('./apis/test')

const obj = {
  ...Test,
}

module.exports = function (middlewares, devServer) {
  Object.keys(obj).forEach((v) => {
    obj[v](devServer)
  })

  return middlewares
}

4、在mocks目录下创建apis目录，并创建具体的mock数据文件test.js， mocks/apis/test.js 文件内容如下：

const { handleReq } = require('../utils')

module.exports = {
  getUser: (devServer) => {
    handleReq(devServer, {
      url: '/users',
      method: 'get',
      json: {
        "name": "张三"
      },
    })
  },
}

5、在mocks目录下创建utils.js文件，用于处理数据返回值的公共逻辑，mocks/utils.js 内容如下：

const Mock = require('better-mock');

Mock.setup({
  timeout: 1000,
});

module.exports = {
  handleReq: (devServer, config) => {
    const { method, url, json } = config
    devServer.app[method]('/mock/api' + url, function (_, res) {
      res.json(Mock.mock(json))
    })
  },
}

 

6、在项目业务代码中使用mock数据，注意请求链接 /mock/api ，utils.js 里面的链接需要和业务代码中的进行匹配，不然没办法进行接口请求代理。

axios.get('/mock/api/users').then((res)=>{
            console.log('res', res)
        })

 

注意：

因为是在webpack的配置文件中引入的mock带，因此，目前不支持修改mock实时获取，每次修改mock数据后，需要重新启动服务才能获取到最新的mock数据。