webpack-dev-serverでBasic認証

webpack-dev-serverがとても便利ですよね。
ただ、現状開発が滞っているのと、2.x系がベータ版で動作微妙なので、安定版(?)のv1.14.1にベーシック認証のオプションを追加してみました。

とりあえずBasic認証したい

とりあえず使ってみたいって人は、package.jsonのwebpack-dev-serverの部分を以下のように変えてnpm install

"webpack-dev-server": "git+ssh://git@github.com/slont/webpack-dev-server.git#add-basic-auth"

ソース

GitHub

bin/webpack-dev-server.js

var fs = require("fs");
{...}
var basicAuth = require("basic-auth-connect"); // 追加

function Server(compiler, options) {
  {...}

  var features = {
    {...}
    // 追加
    basicAuth: function() {
      if (options.basicAuth) {
        app.use(basicAuth(options.basicAuth.id, options.basicAuth.passwd));
      }
    },
    {...}

  var defaultFeatures = ["setup", "headers", "middleware"];
  if(options.proxy)
    defaultFeatures.push("proxy");
  if(options.historyApiFallback)
    defaultFeatures.push("historyApiFallback", "middleware");
  // 追加
  if(options.basicAuth)
    defaultFeatures.push("basicAuth");
  defaultFeatures.push("magicHtml");
  if(options.contentBase !== false)
    defaultFeatures.push("contentBase");
  {...}

lib/Server.js

if(argv["content-base"]) {...}の次とか適当な所に以下を追加。

  if(options.basicAuth) {
    if(!(options.basicAuth.id && options.basicAuth.passwd)) {
      options.basicAuth = undefined;
    }
  }

これでpackage.jsonにbasic-auth-connectとか書いておけばOK。

webpack.config.js

devServer: {
  ...
  basicAuth: {
    id: "admin",
    passwd: "pass"
  }
}

これでBasic認証ができます。

ちなみに本家にプルリク出してみたけど、テストが通らない…さらっとしか見てないけど、誰か直してください笑