Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

webpack 0.9 #10

Closed
sokra opened this Issue · 2 comments

2 participants

@sokra

For webpack 0.9 support I would design rewire as webpack plugin.

The interfaces are not yet documented but here is what you will need:

A plugin must have a apply function with on argument (the compiler).

The Compiler extends Tapable so it exposes a plugin method.


You want to handle "normal" modules which are created by the normal-module-factory. It can be intercepted at after-resolve so you could enforce a loader by adding it to loaders.

The ModuleAliasPlugin from enhanced-resolve can rename a module i.e. rewire to rewire/bundlers/webpack. Alternatively you could change it in after-resolve.

function RewirePlugin() {
}
RewirePlugin.prototype.apply = function(compiler) {
  compiler.plugin("normal-module-factory", function(nmf) {
    nmf.plugin("after-resolve", function(data) {
      data.loaders.unshift(path.join(__dirname, "postloader.js"));
    });
  });
  var aliasPlugin = new ModuleAliasPlugin({ rewire: __dirname });
  compiler.resolvers.normal.apply(aliasPlugin);
  compiler.resolvers.context.apply(aliasPlugin);
};

You can get the "native" require function inside a compiled module with __webpack_require__.


Better but more complex solution:

You may want to make rewire("../lib/myModule.js"); behave similar to require("../lib/myModule.js");, but with a extra loader.

Take a look at these files:

You need to write a own RewireDependency which is very simple.

You need to register the plugin call rewire on compiler.parser and create the RewireDependency.

In the RewirePlugin you need to bind RewireDependency to a template (ModuleDependencyTemplateAsId is suitable) and to a factory.

Write a simple factory (decorator), which decorates the NormalModuleFactory.

function RewireFactory(factory) {
  this.factory = factory;
}
RewireFactory.prototype.create = function(context, dependency, callback) {
  this.factory.create(context, dependency, function(err, module) {
    if(err) return callback(err);
    module.loaders.unshift(...);
    module.request = "rewired " + module.request;
    // modules with equal module.request are threaded as equal,
    // so we have to choose a unique one.
    return callback(null, module);
  });
}

The result: rewire(/* ... */ 123), with 123 is the module id.

To inject the rewire function where used take a look at https://github.com/webpack/webpack/blob/master/lib/ConsolePlugin.js

Add it when adding the RewireDependency.

You can access the modules with __webpack_modules__, it's a object with key is module id and value is a function(module, exports, require).


Tobias

@jhnns
Owner

Nice! I was wondering if I should open an issue at webpack to discuss that :smile: .

The current implementation is quite a hack, because webpack's module system in the browser was not prepared for such a use-case. But the plugin for browserify isn't better. I had to do a lot of tricks - but hey: It's working! :wink:

Btw: You can switch the branch to webpack-update which contains a fast fix. But I will implement your suggestions the next days if I have time.

@sokra sokra referenced this issue from a commit in webpack/rewire
@sokra sokra jhnns/rewire#10 3e539f6
@sokra

see #12

@sokra sokra closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.