Webpack with memory-fs running on an express server.

webpack-memoryfs-server.js

const webpack = require("webpack");
const express = require("express");
const MemoryFileSystem = require("memory-fs")

// 仮想的にファイルを用意する (cf. https://github.com/webpack/memory-fs)
const fs = new MemoryFileSystem()
fs.writeFileSync("/index.html",
    `<h1>My App!</h1><script src="bundle/app.js"></script>`)

fs.mkdirpSync("/src")
fs.writeFileSync("/src/index.js",
    `import "./dep.js"; console.log("index.js!");`);
fs.writeFileSync("/src/dep.js",
    `console.log("dep.js!");`);

// Webpackの準備
const compiler = webpack({
    entry: "/src/index.js",
    output: {
        path: "/bundle/",
        filename: "app.js",
    },
})

// memory-fs で Webpack を動かすためのおまじない
// https://github.com/webpack/webpack/issues/1562
compiler.inputFileSystem = fs
compiler.outputFileSystem = fs
compiler.resolvers.normal.fileSystem = fs
compiler.resolvers.context.fileSystem = fs

// サーバの立ち上げ
const devserver = express();
devserver.get("/", (req, res) => {
    res.setHeader("Content-Type", "text/html")
    res.send(fs.readFileSync("/index.html"));
});
devserver.get("/bundle/app.js", (req, res) => {
    compiler.run((err, stats) => {
        if (err) {
            res.send(err);
            return
        }
        res.send(fs.readFileSync("/bundle/app.js"));
    });
});
devserver.get("/*", (req, res) => {
    res.send(fs.readFileSync(req.path));
});

devserver.listen(13000);