Webpack devServer helper

A processor to mock data from static file via devServer.historyApiFallback.rewrites. Also a tool to parse mock configuration. Another tool is used to process devServer.proxy configuration, taking into account the public path and other stuff, to simplify its configuration.

Mock illustration

config

• folder

  mock

• mocked file extension

  json

• conversion map

      'article/(\\d+)/comment/(\\d+)' =>  'article_$1_comment_$2'
  

url

`article/235/comment/456`

result url

`mock/article_456_comment_235.json`

Webpack config example

const helper =require('webpack-devserver-helper');
const publicPath = 'root';
const cfg= [
  ['article/(\\d+)/comment/(\\d+)', 'article_$1_comment_$2_']
];
const mock=helper.staticMock(helper.parseMockConfig(cfg), publicPath);
module.exports={
  ...,
  devServer: {
    historyApiFallback: {
      verbose: true,
      index: publicPath + '/index.html',
      rewrites: [{
        from: new RegExp(`^api/([^.]+)`),
        to: function(ctx){
          return mock(ctx.match[1]);
        } 
      }]
    },
    setup:function setup(app){
      app.post('/api/:path', function(req, res, next) {
        req.method='GET';
        next();
      });
    }
  }
};

Proxy illustration

config

• public path

  root

• source config

  {
  context: ['/auth', '/api'],
  target: 'http://localhost:3000',
  }
  

output

[{
  context: ['root/auth', 'root/api'],
  target: 'http://localhost:3000',
}]

Docs

Functions

parseMockConfig(cfg) ⇒ Object

Generate config of full format from shorthand, for staticMock using. Acceptible formats refering to @see.

staticMock(mockConfig, publicPath, [ext]) ⇒ function

Create a path mapping function used for devServer config. Config details referring to webpack config example.

parseProxies(proxies, publicPath, apiPrefix) ⇒ Object

Refine setting for devServer.proxy. 1) prepend publicPath to key. 2) rewrites them to empty string, if no 'pathRewrite' is specified. 3) set logLevel to 'debug'.

parseMockConfig(cfg) ⇒ Object

Generate config of full format from shorthand, for staticMock using. Acceptible formats refering to @see.

Kind: global function
Returns: Object - - refined config
See: input and output formats

• input

  • {true} => {folder:'mock'}
  • {string} 'mockDir' => {folder:'mockDir'},
  • {array}

    ['article/(\\d+)/comment/(\\d+)', 'article_$1_comment_$2_']
    =>
    {folder:'mock', rewrites:[]}
    

  • {Object} if 'folder' is missed, set to 'mock', or stay untouched

• output

  {
    folder:'mock',
    rewrites:[
      ['article/(\\d+)/comment/(\\d+)', 'article_$1_comment_$2_']
    ]
  }
  

Param	Type	Description
cfg	Object	passed in shorthand config.

staticMock(mockConfig, publicPath, [ext]) ⇒ function

Create a path mapping function used for devServer config. Config details referring to webpack config example.

Kind: global function
Returns: function - - function mapping path to mock data file name.

Param	Type	Default	Description
mockConfig	Object		returned from parseMockConfig()
publicPath	string		what is configured in webpack
[ext]	string	"json"	default file extension mapped when no rewrites matched

parseProxies(proxies, publicPath, apiPrefix) ⇒ Object

Refine setting for devServer.proxy.

1. prepend publicPath to key.
2. rewrites them to empty string, if no 'pathRewrite' is specified.
3. set logLevel to 'debug'.

Kind: global function
Returns: Object - the config object with correct format.
See: allowed format for input config:

• {string} assume apiPrefix is source to match 'http://api.com'

• {object} {'api':'http://afsfa.com'}

  or (will be wrapped into array automatically)

  {
    context: ['/auth', '/api'],
    target: 'http://localhost:3000',
  }

• {array}

  [{
   context: ["/auth", "/api"],
   target: "http://localhost:3000",
  }].
  

Param	Type	Description
proxies	string | object | array	input config, ref @see to see allowed format.
publicPath	string	the option set in webpack.
apiPrefix	string	default url to match when url is missing in config.

License

MIT.