Webpack 插件

使用 mokup/webpack 在 webpack-dev-server 与构建产物中接入 Mokup。

安装

pnpm

pnpm add -D mokup

npm

npm install -D mokup

yarn

yarn add -D mokup

bun

bun add -d mokup

基本用法

使用场景：

• 在 webpack-dev-server 中接入 Mokup mock。
• 构建时输出 SW 资源用于浏览器侧 mock。

推荐（使用封装函数）：

const { mokupWebpack } = require('mokup/webpack')

const withMokup = mokupWebpack({
  entries: {
    dir: 'mock',
    prefix: '/api',
  },
})

module.exports = withMokup({})

直接使用插件（短名称）：

const { createWebpackPlugin } = require('mokup/webpack')

module.exports = {
  plugins: [
    createWebpackPlugin({
      entries: {
        dir: 'mock',
        prefix: '/api',
      },
    }),
  ],
  devServer: {},
}

Service Worker 模式

使用场景：

• 在浏览器 Service Worker 中运行 mock 处理器。
• dev 与 build 共用同一套 mock 目录。

示例：

const { createWebpackPlugin } = require('mokup/webpack')

module.exports = {
  plugins: [
    createWebpackPlugin({
      entries: {
        dir: 'mock',
        prefix: '/api',
        mode: 'sw',
        sw: {
          path: '/mokup-sw.js',
          scope: '/',
        },
      },
    }),
  ],
}

选项

选项与 Vite 插件一致：顶层 entries + playground，以及每个 entry 的配置，详见 Vite 插件。

注意

• Dev server 会通过 devServer.setupMiddlewares 注入中间件，请确保启用了 webpack-dev-server。
• mokupWebpack(...) 会自动创建 devServer 对象，除非需要自定义 dev-server 设置，否则可以省略。
• SW 生命周期脚本会输出到 assets 目录（默认 assets/mokup-sw-lifecycle.js）。如果使用 html-webpack-plugin 会自动注入，否则需要手动引入。