API - Using Preloaded Assets with the Compiler

[pksjce]

From @danschumann on March 11, 2015 14:0

I have all my files in memory, for various reasons I won't get into ( maybe one is because I wrote a loading module loaddir and tend to use it ), but part of it is re-using code on the front end and back end.

My loaded files look like this (asObject: true):

require('loaddir')({path: './scripts', asObject: true }).then(function(directory) {
  /* directory == {
     'file1': 'console.log("file1");',
     'subDirectory': {
         'file2': 'console.log("subDir/file2");',
     },
  } */
});

or, my loaded files look like this (asObject: false)

require('loaddir')({path: './scripts' }).then(function(directory) {
  /* directory == {
    'file1': 'console.log("file1");',
    'subDirectory/file2': 'console.log("subDir/file2");',
  } */
});

How do I give a manifest like this to webpack, telling it "Hey webpack, I already loaded everything, can you just compile using this data plz?"

Copied from original issue: webpack/webpack#874

[pksjce]

From @sokra on March 13, 2015 13:44

You can provide a custom inputFileSystem to the Compiler instance.

[pksjce]

From @danschumann on March 16, 2015 17:29

Is it documented anywhere? Or, what structure does it need to be in?

[skipjack]

@sokra can you give a little more detail on inputFileSystem (e.g. how/where it's passed and used)? Seems like we could just add the docs to this page.

[skipjack]

This section seems to be the only one that mentions it so far. Related discussion here as well: webpack/webpack#1562.

It also seems to be somewhat related to the webpack/enhanced-resolve repository and the **InputFileSystem.js modules offered there.

[sokra]

You can set the compiler.inputFileSystem in the Compiler's enviroment hook.

This should be an object with these methods:

mkdirp(path, callback)
readFile(path, callback) // only Buffer variant needed
readdir(path, callback)
stat(path, callback)

[skipjack]

@sokra so I do see the environment event listed in the compiler events table but it says no params are passed to the callback -- is that wrong and it's set like so?

MyCompiler.plugin("environment", function(compiler) {
    compiler.inputFileSystem = {
         mkdirp(path, callback) { ... },
         readFile(path, callback) { ... },
         readdir(path, callback) { ... },
         stat(path, callback) { ... }
    }
});

or differently? Also it seems maybe we should recommend people use or at least take a look at the ***InputFileSystem files in enhanced-resolve?

[sokra]

I recommend using memory-fs for your own in memory filesystem.

[skipjack]

Ok will do -- is that usage example I showed correct or incorrect though?

[skipjack]

Related: webpack/webpack#1562

[skipjack]

Hmmm I found what looks like a good example here: christianalfoni/webpack-bin#106.