Question: how to setup in-memory compiler with loaders properly

[kisenka]

Hi! I'm trying to use Webpack compiler in memory (input & output filesystem) just like you do (https://github.com/christianalfoni/webpack-bin/blob/master/server/sessionBundler.js#L82). All was great until loaders is appears in configuration :) Because of filesystem located in memory seems like loaders files needs to be in memory too. Am I right? My setup is pretty simple:

var webpack = require('webpack');
var MemoryFileSystem = require('memory-fs');
var memoryFs = new MemoryFileSystem();

memoryFs.mkdirpSync('/src');
memoryFs.writeFileSync('/src/app.js', 'require("./styles.scss");', 'utf-8');
memoryFs.writeFileSync('/src/styles.scss', '$color:red; *{color: $color;}', 'utf-8');

var compiler = webpack({
  context: '/src',
  entry: {app: './app.js'},
  resolveLoader: {
    root: path.resolve('node_modules')
  },
  resolve: {
    root: path.join('/', 'node_modules')
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'css!sass'
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: '/build'
  }
});

compiler.inputFileSystem = memoryFs;
compiler.outputFileSystem = memoryFs;
compiler.resolvers.normal.fileSystem = memoryFs;
compiler.resolvers.context.fileSystem = memoryFs;

compiler.run(function(err, stats) {
  if (err) throw err;

  console.log(stats.compilation.assets['app.js'].source());
});

It's strange but I'm getting error only from css-loader, not from sass-loader.

[christianalfoni]

Yup, exactly :) If you take a look at:

https://github.com/christianalfoni/webpack-bin/blob/master/server/index.js#L31 https://github.com/christianalfoni/webpack-bin/blob/master/server/preLoadPackages.js

You see how I preload them into memory :-)

[christianalfoni]

Closing this, hope it helped you out!

[vasco]

Hi @christianalfoni Great information both in this issue as well as in https://github.com/webpack/webpack/issues/1562

I'm also trying to use Webpack compiler in memory, and I'm also struggling with loaders/presets. Maybe you (or someone) can give me an hand on that..

My webpack setup is like this:

var compiler = webpack({
  entry: "/src/index.js",
  output: {
    filename: '[name].js',
    path: '../dist'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
});

compiler.inputFileSystem = inputFs;
compiler.resolvers.normal.fileSystem = compiler.inputFileSystem;
compiler.resolvers.context.fileSystem = compiler.inputFileSystem;

my memory filesystem (inputFs) is like this (Note: I wrote a JSON to simplify how the fs is structured):

{
  "/src/index.js/": "ReactDOM.render(<h1>Hello World!</h1>,document.getElementById('example'));"
}

I tried to run this code directly, giving me the exception:

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/src"

And I also tried to run this code with your preLoadPackages method with the difference that I used require('recursive-readdir-sync'); instead of require('recursive-readdir'); to ensure that when I called compiler.run the memory fs had all the files (I also checked this).

Any ideas of what I might be getting wrong?

Thank you in advanced!