webpack 0.9 #10

Closed
sokra opened this Issue Feb 5, 2013 · 2 comments

Comments

Projects
None yet
2 participants
@sokra
Contributor

sokra commented Feb 5, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jhnns

jhnns Feb 5, 2013

Owner

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

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! 😉

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.

Owner

jhnns commented Feb 5, 2013

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

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! 😉

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Feb 23, 2013

Contributor

see #12

Contributor

sokra commented Feb 23, 2013

see #12

@sokra sokra closed this Feb 23, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment