webpack-plugin-interceptor

English | 中文

A webpack plugin based on service worker to intercept and modify requests in a development environment

the browser needs to support service worker

a chrome extension can be used in production environment. easy-interceptor

Usage

in webpack.config.js

const { Interceptor, middleware } = require('webpack-plugin-interceptor')

export default {
    // ...
    plugins: [
        // Interceptor()
        // or
        new Interceptor({
            input: 'src/index.ts', // 默认src/index.ts
            mockDir: './src/__mock__',   // 默认src/mock
        }),
    ],
    devServer: {
        // install middleware
        setupMiddlewares: (middlewares) => {
            middlewares.push(middleware)
            return middlewares
        }
    }
}

in webpack-dev-server3.0

export default {
    devServer: {
        before: (app) => {
            app.use(middleware.middleware)
        }
    }
}

// create a .ts or .js file in __mock__ dir，must be use export default and set rules by plugin provide

export default function() {
    window.__INTERCEPTOR_DEVTOOL__.set(
        '1',
        {
            url: '**/tsconfig.json',
            method: 'get',
            response: '{"foo":"test"}',
            // enable: false,
            // delay: 5000,
        }
    )
}

ts type, create a new file interceptor.d.ts, input this text

/// <reference types="webpack-plugin-interceptor/typing" />

you will meet the following errors in https project. The solutions are as follows

Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://127.0.0.1/') with script ('https://127.0.0.1/sw000.js'): An SSL certificate error occurred when fetching the script.

// terminal
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:443

// windows
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir=./tmp --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:443

API

__INTERCEPTOR_DEVTOOL__

prop	explain	type	description
get	get rules	()=>Promise
set	set a rule	(id, rule) => void
clear	clear all rules	()=>void

InterceptorRule

prop	explain	type	description
url	match request url	string	rquired
response	response text	string	rquired
delay	delay	number	0
enable	enable rule	boolean	true
method	request method	get post put delete
responseHeaders	response headers	Record<string, string>	{}
status	response status	number	200

about multi-page: the sw.js scope is ./, so the plugin supports multi-page. just load the configured page to make the script active

LICENSE

MIT