Pluggable resolvers?

[petehunt]

Hey webpack team --

I'm currently evaluating webpack as the replacement for our current module loader on Instagram.com.

I see in the docs that you describe your module resolution process: https://github.com/webpack/docs/wiki/resolving but I can't figure out if this is pluggable or not.

EDIT (sokra): http://webpack.github.io/docs/resolving.html

Our client-side codebase is a decent size (20kloc of JS for the app itself, 50kloc with JS dependencies) and I would prefer to not have to refactor all of it to adopt webpack.

First, we originally used RequireJS so we require() everything in the application relative to the root. For example, if a component in lib/ui/Button.js wants to require a component in lib/ui/Whatever.js, the statement we use is require('lib/ui/Whatever') rather than require('./Whatever'). This makes refactoring much easier (a best practice adopted from Facebook's hugely massive codebase).

Second, we integrate deeply with the Facebook codebase which uses an alternate way of resolving modules. A good example of how this works is React (https://github.com/facebook/react/blob/master/src/core/React.js). We put /** @providesModule XYZ */ in a JS file and then we can do require('XYZ') to get it.

Today we do a prebuild step that has to move a bunch of files around on the filesystem, or rewrite all of the requires to the right place.

It would be nice if I could provide a function (moduleID) => pathToFile to webpack that it would use to resolve these paths. Then I could replace basically our entire toolchain with webpack and a few custom loaders/resolvers. Once this is working on Instagram it'd likely find its way to the React project in open-source as well.

I understand that this is somewhat of a one-off request for us, but I do know that Browserify and RequireJS resolve paths differently, so making the resolution strategy pluggable is probably generalizable outside of this use case.

[sokra]

The good news is the resolver is pluggable, it use the same plugin system as webpack. The bad news: it' currently undocumented.

For a require.js like resolving, use the require.root option. Just pass a absolute path to the application folder.

You can overwrite the resolver in a webpack plugin or add resolving plugins to the resolver for a modified resolving logic.

If you overwrite the Resolver, provide a instance with two methods

interface Resolver {
  resolve: function(
     context: String, 
     request: String,
     callback: function(err, result: {path, query, file: boolean, directory: boolean}
  )
  resolveSync: function(context, request)
}

If you want to add resolving plugins:

There is a extension point "module" in the Resolver with the signature:

function(
  request: { path: String, request: String, query: String, directory: boolean },
  callback: function(err, result: {path, query, file: boolean, directory: boolean})
)

An example: Resolving require(test) to a file:

var path = require("path");
module.exports = {
  plugins: [
      function(compiler) {
        compiler.resolvers.normal.plugin("module", function(request, callback) {
          if(request.request === "test") {
            callback(null, {
              path: path.join(__dirname, "test.js"),
              query: request.query,
              file: true, resolved: true
            });
          } else
            // continue with other plugins
            callback();
        });
      }
  ]
}

More reading (in the source code):

• webpack's options to plugins method
• resolver plugins
• component-webpack-plugin, which has a custom resolver plugin

[sokra]

Started some very basic documentation here.

[jhnns]

Would be awesome if Instagram used webpack 👍

[radiosilence]

I am trying to do this, but it just complains that "compiler" is undefined.

[kristianmandrup]

Would be sweet with a custom resolver for the new IPFS, the future of the ethernet Web 3.0.
Then we could require location independently, true URIs that are not location dependent :)

[kristianmandrup]

@sokra Looks like your Resolver docs were removed. Perhaps no longer compatible with latest webpack API!? I found this example as well ;)

[privatenumber]

@sokra Is there an updated version of the resolver plugin solution?