webpack-dev-serverでBasic認証

Javascript 2016年7月5日

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認証ができます。

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

slont

金融ベンチャーでWebエンジニア

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.