brfs not inlining... what am I missing?

[mattdesl]

Here is the file:

var foo = require('fs').readFileSync('./package.json', 'utf8');
console.log(foo);

The above works fine with browserify: browserify index.js -t brfs > bundle.js

But I can't get it to work with webpack. Here is my config:

module.exports = {
    context: __dirname,
    entry: "./index.js",
    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: "transform?brfs"
            }
        ]
    }
}

Running it through webpack leads to the following wrapped inside the bootstrap:

/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    var foo = __webpack_require__(1).readFileSync('./package.json', 'utf8');
    console.log(foo);

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

I changed it to use __dirname which seems to affect the build:

var foo = require('fs').readFileSync(__dirname+'/package.json', 'utf8');
console.log(foo);

And now the bundled output from webpack reads:

    /* WEBPACK VAR INJECTION */(function(__dirname) {var foo = __webpack_require__(1).readFileSync(__dirname+'/package.json', 'utf8');
    console.log(foo);
    /* WEBPACK VAR INJECTION */}.call(exports, "/"))

Still, the file is not being inlined into the bundle like it is with brfs / browserify.

[sokra]

You need to change your configuration to:

            {
                test: /\.js$/,
                loader: "transform?brfs"
            }

The brfs transform should process the JS file. The test is executed on the absolute filename.

But this makes all javascript files uncachable, which has a big performance impact in watch mode. So you should better use transform/cacheable?brfs, which is a cacheable version. (That's not perfect because it wouldn't detect changes of the json files, but transforms doesn't have a way to tell the module system about dependencies. A native loader may do.)

[mattdesl]

Ah, got it thanks. So this makes the browserify loader enabled for all .js files that I'm requiring (like fs)?

Also, using readFileSync without a utf8 parameter leads to some errors. Should I create a new ticket?

ERROR in (webpack)/~/node-libs-browser/~/buffer/index.js
Module not found: Error: Cannot resolve module transform/cacheable in /usr/local/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/buffer
 @ (webpack)/~/node-libs-browser/~/buffer/index.js 1:0-106

ERROR in (webpack)/~/node-libs-browser/~/buffer/index.js
Module not found: Error: Cannot resolve module transform/cacheable in /usr/local/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/buffer
 @ (webpack)/~/node-libs-browser/~/buffer/index.js 9:14-32

ERROR in (webpack)/~/node-libs-browser/~/buffer/index.js
Module not found: Error: Cannot resolve module transform/cacheable in /usr/local/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/buffer
 @ (webpack)/~/node-libs-browser/~/buffer/index.js 8:13-33

[sokra]

Ah, got it thanks. So this makes the browserify loader enabled for all .js files that I'm requiring (like fs)?

Yep, and this is the problem here. It tries to use the specified loader transform/cachable?brfs for the build-in modules. Loader resolve like module, so it tries to find the loader in a node_modules folder in a parent folder of the module. As you installed webpack globally and don't have a local installed version (you should always have one), it doesn't find it. You may fix it by installing a local webpack version or specify resolveLoader.root.

But the real solution is to restrict the loader configuration to your app code.

{
  test: /\.js$/,
  include: path.join(__dirname, "lib"),
  loader: "transform?brfs"
}

See module.loader configuration.

[sokra]

Could you add this (include) in your README PR?

[psulat]

I'm using brfs and would like to restrict what dirs are included. However, this syntax isn't working for me.

include: path.join(__dirname, "lib"),

I've tried hard coding the absolute path and it still wouldn't process the files in the dir. Any suggestions?

[jaydenlin]

Still meet the same problem here. My setting is

          {
                test: /\.js$/,
                loader: "transform?brfs"
            }

And my code is

var foo = require('fs').readFileSync('./package.json', 'utf8');
console.log(foo);