webpack-devserver-helper v1.0.0

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_']
    ]
  }

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.

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",
  }].

License

MIT.