webpack-render-module

Dummy.js

var constructor = function(params) {
    RenderModule.call(this, constructor, params);
};

constructor.FX2RenderModuleName = 'Dummy';

constructor.init = function() {
    return RenderModule.init(Utils.resolveUrl('./render.js'), constructor);
};

module.exports = constructor;

/**
Assuming that Dummy.js is an entrypoint in webpack config I want to achieve the following:
1. make `render.js` a dependency of Dummy.js so a change in render.js can trigger a rebuild. (use `this.addDependency()` inside the loader?)
2. apply tranformations (other loaders/ babel plugins) pecific to the render.js code. (use `this.loadModule()`? idk)
3. in the final result Dummy.js should have the source code of render.js inside a constructor property. 
For example: `constructor.render = "render.js transformed code"`;

- Is it having a loader the right approach here? if so should I use the picht phase or not?
- What would be the difference using a plugin? Does it even make sense?
- Is it ok using babel directly inside a loader to apply tranformations or should be used only with babel-loader?

I wrote loader1.js and loader2.js trying to implement the behavior but idk if it is the right direction. Thanks for the help!

*/

loader1.js

// This loader extract the render.js dependency and runs a specific 
const { extractRenderCodeDep } = require('./dependencyExtractor');

module.exports = function(source) {
    this.cacheable();
    const callback = this.async();
    // This will extract `./render.js` from Dummy.js
    const renderDep = extractRenderCodeDep(source);
    if(renderDep) {
        this.resolve(this.context, renderDep, (err, resolved) => {
            if (err) {
                return callback(err);
            }

            this.addDependency(resolved);
            this.loadModule('!!./webpack/loader2!' + dep, (err, renderSource, sourceMap, module) => {
                if(err) {
                    console.log(err)
                }
              
                // TODO: insert `renderSource`: constructor.render = renderSource;

                callback(null, source);
            })

        })
    } else {
        callback(null, source);
    }
}

loader2.js

// This plugin extract the shaders dependencies and applies code transformation
const { extractShaderDep } = require('./dependencyExtractor');

module.exports = function(source) {
    this.cacheable();
    const callback = this.async();

    const shadersDep = extractShaderDep(source);
    if (shadersDep.length > 0) {
        this.resolve(this.context, shadersDep[0], (err, resolved) => {
            if (err) {
                return callback(err);
            }

            this.addDependency(resolved);
          
            // TODO: use Babel to apply code transformations
          
            callback(null, source);
        })
    } else {
        callback(null, source);
    }
}