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.

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.