Webpack Output Straight Into Memory

Usually people would save the output into a file when using Webpack. In one instance I wanted to store some static files into Redis including the output of some Stylus and Webpack-bundled scripts. So, to do that I explored how others might go about it.

Initially I discovered this module called webpack-to-memory and I thought “Oh good!” because if it worked I would have an easy time of it. But it didn’t work and it was non-trivial to figure out how to fix it.

After looking around a while I noticed that much of what is out there for this sort of thing is outdated or not helpful. So, then I had to make the script. To do that all that needs to be done is to mock a few file-system related functions and pass that mock object into Webpack.

'use strict';

var fs = require('fs'),
    path = require('path'),
    webpack = require('webpack'),
    files = {};

// callback for `builder.run`
function webpackResult(err) {
    var msg;

    if (err !== undefined && err !== null) {
        msg = err.message.split('\n').filter(function (item) {
            return item.indexOf('    ') !== 0;
        }).join(' ');
        console.error('webpack compile error', msg);

    console.log('done with no errors');

webpackOptions = {
    // try inline-source-map, it will only output 1 file
    devtool: 'source-map',
    entry: path.join(__dirname, 'client.js'),
    output: {
        // this gets prepended to the output file names
        path: '/'

bundler = webpack(webpackOptions);

// mock the minimum fs implementation for webpack to output a string
bundler.outputFileSystem = {
    mkdirp: function (uri, callback) {
        callback(null, uri);
    join: function () {
        var args = Array.prototype.slice.call(arguments);
        args = args.join('/');
        args = args.replace(/\/\//g, '/');
        return args;
    writeFile: function (outputPath, content, callback) {
        // convert buffers to strings
        if (typeof content !== 'string') {
            content = content.toString('utf8');

        // save the output into the redis cache
        files[outputPath] = content;
        console.log('webpack cache saved', outputPath, 'bytes:', content.length);

// generate the output

Try it yourself if you like. It might allow for some interesting performance and caching experiments for you and your team. Let me know if that helps you out.

Author Tony Crowe, Salt Lake City, UT
Lato font by Łukasz Dziedzicwww.latofonts.com/team
Roboto font by Christian Robertson, Google Incchristianrobertson.comwww.google.com/fonts
Inconsolata font by Raph Levien, Google Incwww.levien.comwww.google.com/fonts
hexo: fast, simple & powerful blog frameworkhexo.io
ace editorace.c9.io
Black Granite Water Droplets, William Warbyhttps://www.flickr.com/photos/wwarby