WebpackDevServerでモックサーバを立てる

WebpackDevServerでローカル開発をする際にAPIのモックサーバを立てて開発したい時があると思います。そういうときにWebpackDevServerで簡易的なサーバを実装する機能が便利です。

WebpackDevServerのbeforeプロパティを使えばかなり簡単にモックサーバを立てることができます。

devServer.beforeを使ったモックサーバ

devServer.before | webpack

webpack.config.jsのdev serverの設定でbeforeというプロパティでexpressのようなノリでサーバを実装できます。

webpack.config.jsに下記のように実装できます。

module.exports = {
  //...
  devServer: {
    before: function(app, server) {
      app.get('/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
  }
};

リクエスト

リクエストはこんな感じで書けば良いです。

export const getPath = () => {
  const url = "/path";
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.send();
  xhr.onload = res => {
    console.log(res);
  };
};

もしくはFetch APIを使っても良いです。

fetch("/path").then(res => {
    console.log(res);
  });

リクエストはこんな感じになります。

レスポンスがちゃんと返ってきてるのがわかります。