{"id":14341,"library":"webpack-mock-server","title":"Webpack Mock Server","description":"Webpack Mock Server is an Express.js middleware designed to integrate seamlessly with `webpack-dev-server` for API request mocking during development. It boasts a built-in hot-replacement (HMR) mechanism and a TypeScript compiler, allowing developers to define mock responses using `.js`, `.ts`, and `.json` files. The current stable version is `1.0.23`, with an active maintenance cadence demonstrated by frequent point releases addressing compatibility and bug fixes. A key differentiator is its ability to display all configured mock endpoints in a user-friendly `index.html` interface, accessible directly from the console. Unlike traditional proxy setups, it functions as a middleware, avoiding complex proxy-path-patterns while maintaining the ability to use ordinary `fetch('/api/getUserInfo')` calls. It can also operate as a standalone Express middleware without Webpack. This approach simplifies development workflow by providing a robust and integrated mocking solution.","status":"active","version":"1.0.23","language":"javascript","source_language":"en","source_url":"https://github.com/Yegorich555/webpack-mock-server","tags":["javascript","webpack","mock","mocker","server","api","webpack-dev-server","typescript","ts"],"install":[{"cmd":"npm install webpack-mock-server","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-mock-server","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-mock-server","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as `webpack-mock-server` is an Express.js middleware. It needs Express to define routes and handle requests.","package":"express","optional":false},{"reason":"Explicitly required as a peer dependency for compilation, even when using JavaScript (`.js`) mock files. Critical for the built-in TypeScript compiler.","package":"typescript","optional":false},{"reason":"Essential for TypeScript projects to provide type definitions for Express.js, enabling type-safe mock endpoint definitions.","package":"@types/express","optional":false},{"reason":"Listed as a peer dependency, potentially needed for type definitions related to `formData` parsing if Multer is used implicitly or explicitly.","package":"@types/multer","optional":true}],"imports":[{"note":"This CommonJS `require` syntax is typically used in `webpack.config.js` for setting up the middleware.","symbol":"webpackMockServer","correct":"const webpackMockServer = require(\"webpack-mock-server\");"},{"note":"This ESM `import` syntax is the preferred method for `webpack.mock.ts` (or `.js` when using ESM) to access the main module.","wrong":"const webpackMockServer = require('webpack-mock-server');","symbol":"webpackMockServer","correct":"import webpackMockServer from \"webpack-mock-server\";"},{"note":"The `add` method is exposed directly on the default `webpackMockServer` export and is used to register individual mock definitions. It is not a named export from the package root.","wrong":"import { add } from 'webpack-mock-server';","symbol":"webpackMockServer.add","correct":"export default webpackMockServer.add((app, helper) => { /* ... */ });"}],"quickstart":{"code":"/*\n  1. Create webpack.config.js\n  2. Create webpack.mock.ts\n  3. Create src/index.ts (can be empty)\n  4. Create tsconfig.json (minimal) if using TS\n  5. npm install --save-dev webpack webpack-cli webpack-dev-server webpack-mock-server typescript ts-loader express @types/express\n*/\n\n// webpack.config.js\nconst webpackMockServer = require(\"webpack-mock-server\");\nconst path = require(\"path\");\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.ts', // Dummy entry for webpack to run\n  devServer: {\n    port: 8080,\n    setupMiddlewares: (middlewares, devServer) => {\n      webpackMockServer.use(devServer.app, {\n        port: (devServer.options.port || 8080) + 1, // Mock server runs on 8081 by default\n        logLevel: 'info', // Optional: for detailed logging\n        entry: path.resolve(__dirname, 'webpack.mock.ts'), // Explicitly define mock entry point\n      });\n      return middlewares;\n    },\n  },\n  // Minimal webpack config to make devServer run\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  resolve: {\n    extensions: ['.ts', '.js'],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.ts$/,\n        use: 'ts-loader',\n        exclude: /node_modules/,\n      },\n    ],\n  },\n};\n\n// webpack.mock.ts\nimport webpackMockServer from \"webpack-mock-server\";\nimport nodePath from \"path\";\nimport { Express } from 'express'; // Import Express types for 'app'\n\n// Simulate content of a 'response.json' file for demonstration\nconst dummyResponseJsonContent = {\n  status: \"success\",\n  data: \"Mocked data from JSON file!\",\n  timestamp: new Date().toISOString()\n};\n\nexport default webpackMockServer.add((app: Express, helper) => {\n  // GET endpoint example\n  app.get(\"/api/users\", (_req, res) => {\n    res.json({ message: \"List of users from mock server. Random ID: \" + helper.getRandomInt() });\n  });\n\n  // POST endpoint example with body parsing\n  app.post(\"/api/users\", (req, res) => {\n    const newUser = req.body;\n    res.status(201).json({ message: \"User created successfully\", user: newUser, mockTimestamp: new Date().toISOString() });\n  });\n\n  // GET endpoint returning a simulated file content\n  app.get(\"/api/config\", (_req, res) => {\n    // In a real scenario, this would load from disk: res.sendFile(nodePath.join(__dirname, \"./response.json\"));\n    res.json(dummyResponseJsonContent);\n  });\n});\n\n// Optional: Export another mock definition (multiple exports are supported)\nexport const analyticsMock = webpackMockServer.add((app: Express, helper) => {\n  app.get(\"/api/analytics\", (_req, res) => {\n    res.json({ views: helper.getRandomInt(100, 1000), clicks: helper.getRandomInt(10, 100) });\n  });\n});\n\n// Minimal tsconfig.json (if using TypeScript)\n/*\n{\n  \"compilerOptions\": {\n    \"target\": \"es2016\",\n    \"module\": \"commonjs\",\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true\n  }\n}\n*/\n\n// Dummy src/index.ts (can be empty)\n// console.log(\"Webpack app running\");","lang":"typescript","description":"Initializes `webpack-mock-server` within `webpack-dev-server` to define and serve basic GET and POST API mock endpoints, demonstrating file-based responses and multiple mock entries."},"warnings":[{"fix":"Upgrade to `webpack-mock-server@^1.0.22` or a later version to ensure compatibility with modern `webpack-dev-server` setups by running `npm install webpack-mock-server@latest`.","message":"Older versions of `webpack-mock-server` (prior to `v1.0.22`) may encounter compatibility issues with newer `webpack-dev-server` releases, leading to the mock server failing to initialize or operate correctly.","severity":"gotcha","affected_versions":"<1.0.22"},{"fix":"Ensure all required peer dependencies are installed in your project: `npm install --save-dev webpack-mock-server typescript express @types/express`.","message":"`webpack-mock-server` explicitly requires `typescript`, `express`, and `@types/express` to be installed as peer dependencies. Failure to install these, especially `typescript` even when using JavaScript (`.js`) mock files, will result in errors during compilation or startup.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update to `webpack-mock-server@^1.0.23` to resolve known issues with `req.body` parsing for `formData` and `Date` types by running `npm install webpack-mock-server@latest`.","message":"Versions prior to `v1.0.23` had issues correctly parsing `formData` with nested dot-notation properties, as well as `Date` objects and primitive values within `req.body` from JSON payloads. This could lead to unexpected or unparsed data in your mock handlers.","severity":"gotcha","affected_versions":"<1.0.23"},{"fix":"Be aware of the default port offset. Configure the `port` option explicitly in `webpackMockServer.use` if you need a specific port or wish to override this behavior, e.g., `{ port: 8081 }`.","message":"By default, `webpack-mock-server` often runs on a port one greater than your `webpack-dev-server`'s configured port (e.g., `8081` if `webpack-dev-server` is on `8080`). This is an intentional design choice to avoid port conflicts but can be unexpected if you assume it will run on the exact same port or don't account for it.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'/api/getuserinfo':121 '1.0.23':58 'abil':79,116 'access':93 'activ':61 'address':69 'allow':41 'also':125 'api':21,152 'approach':135 'avoid':107 'boast':27 'bug':72 'built':30 'built-in':29 'cadenc':63 'call':122 'compat':70 'compil':40 'complex':108 'configur':83 'consol':97 'current':54 'defin':44 'demonstr':64 'design':11 'dev':18,155 'develop':25,42,137 'differenti':76 'direct':94 'display':81 'endpoint':85 'express':130 'express.js':9 'fetch':120 'file':52 'fix':73 'frequent':66 'friend':90 'function':103 'hmr':35 'hot':33 'hot-replac':32 'index.html':91 'integr':13,144 'interfac':92 'javascript':147 'js':48 'json':51 'key':75 'maintain':114 'mainten':62 'mechan':36 'middlewar':10,106,131 'mock':2,5,23,45,84,145,149 'mocker':150 'oper':126 'ordinari':119 'path':111 'pattern':112 'point':67 'provid':140 'proxi':100,110 'proxy-path-pattern':109 'releas':68 'replac':34 'request':22 'respons':46 'robust':142 'seamless':14 'server':3,6,19,151,156 'setup':101 'simplifi':136 'solut':146 'stabl':55 'standalon':129 'tradit':99 'ts':49,158 'typescript':39,157 'unlik':98 'use':47,118 'user':89 'user-friend':88 'version':56 'webpack':1,4,17,133,148,154 'webpack-dev-serv':16,153 'without':132 'workflow':138","created_at":"2026-04-20T01:59:12.410797+00:00","updated_at":"2026-04-20T01:59:12.410797+00:00","problems":[{"fix":"Install `typescript` as a development dependency: `npm install --save-dev typescript` or `yarn add -D typescript`.","cause":"The `typescript` peer dependency is missing from your project's `node_modules`.","error":"Cannot find module 'typescript'"},{"fix":"Install `express` and its type definitions: `npm install --save-dev express @types/express` or `yarn add -D express @types/express`.","cause":"The `express` or `@types/express` peer dependencies are missing, leading to `app` not being a valid Express application instance or its types being undefined.","error":"TypeError: app.get is not a function (or similar Express method error like req.body, res.json)"},{"fix":"Update `webpack-mock-server` to the latest compatible version: `npm update webpack-mock-server` or `npm install webpack-mock-server@latest`.","cause":"Your `webpack-mock-server` version is outdated and incompatible with the `webpack-dev-server` version you are using.","error":"webpack-mock-server: Not running on recent webpack-dev-server versions (or silent failure of mock endpoints)"},{"fix":"Ensure `webpack-mock-server` is updated to `v1.0.23` or later to leverage parsing fixes. If the issue persists, explicitly adding `app.use(express.json());` or `app.use(express.urlencoded({ extended: true }));` at the start of your mock definition file might help.","cause":"Prior to `v1.0.23`, there were known issues with `webpack-mock-server`'s internal body parsing for `formData`, `Date` objects, and dot-notation properties.","error":"req.body is empty, undefined, or contains unparsed data when expecting JSON/formData in mock handler"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/Yegorich555/webpack-mock-server","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-mock-server","openapi_spec":null,"status_page":null,"smithery":null,"categories":["http-networking","web-framework","testing","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}