mock-service-webpack-plugin

A Mock Service Based on Webpack 4/5

Architecture

Use Inter-Process Communication in Node.js to handle HTTP Request between Webpack Dev Server and Mock Server:

Installation

$ npm i mock-service-webpack-plugin

Instruction

Require mock-service-webpack-plugin

const MockServiceWebpackPlugin = require('mock-service-webpack-plugin')

Call the apply method with the webpack mock

myPluginInstance.apply()

Example

Webpack

Modify your webpack.config.js

const MockServiceWebpackPlugin = require('mock-service-webpack-plugin');

const path = require('path');
const fs = require('fs');

module.exports = {
    plugins: [
        new MockServiceWebpackPlugin({
            source: path.resolve(process.cwd(), './src/mock'), // your mock file directory path
            port: 9009 // you wanna a mock service port
        })
    ]
}

Vue Cli

Modify your vue.config.js

if your @vue/cli-service: ~5.0.0

const { defineConfig } = require('@vue/cli-service');
const MockServiceWebpackPlugin = require('mock-service-webpack-plugin');

const path = require('path');
const fs = require('fs');

module.exports = defineConfig({
    configureWebpack: {
        plugins: [
            new MockServiceWebpackPlugin({
                source: path.resolve(process.cwd(), './src/mock'), // your mock file directory path
                port: 9009 // you wanna a mock service port
            })
        ]
    }
})

or in 4.x

const MockServiceWebpackPlugin = require('mock-service-webpack-plugin');

const path = require('path');
const fs = require('fs');

module.exports = {
    configureWebpack: {
        plugins: [
            new MockServiceWebpackPlugin({
                source: path.resolve(process.cwd(), './src/mock'), // your mock file directory path
                port: 9009 // you wanna a mock service port
            })
        ]
    }
}

License

MIT

Copyright (c) 2023-present Victor Lee