Download Webpack download code on the fly

Question

So, I want to break the application code into 3 packages using webpack. I can download the download package and work with it, but I cannot download the other two packages on the fly. Here is my webpack configurator:

var fs      = require('fs'),
    path    = require('path'),
    webpack = require('webpack'),
    apps = fs.readdirSync('./app');
    appModuleRegex = new RegExp("^(" + apps.join('|') + ")/(.*)$");

module.exports = {
    context: 'app',
    entry: {
        framework: 'framework/app',
        operations: 'operations/app',
        platform: 'platform/app'
    },
    output: {
        path: '/web/dist/',
        filename: '[name].entry.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /\.test.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    resolveLoader: {
        root: path.join(process.cwd(), "node_modules")
    },
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
    },
    plugins: [
        new webpack.NormalModuleReplacementPlugin(appModuleRegex, function(result) {
            result.request = result.request.replace(appModuleRegex, "/web/app/$1/src/$2");
        }),
        new webpack.NormalModuleReplacementPlugin(/fetch/, function(result) {
            console.log("TRANSFORMING fetch");
            result.request = 'isomorphic-fetch';
        }),
        // new webpack.optimize.CommonsChunkPlugin("commons.js")
    ],
    devServer: {
        contentBase: '/web/dist/'
    }
}

And basically I use a response agent to try to download other application packages if the URL matches them:

class NotFound extends React.Component {
    render () {
        return null;
    }

    componentDidMount () {
        var path = this.context.router.getCurrentPath(),
            appName = path.split('/')[1];

        if (appName === 'operations') {
            require('./operations.entry.js');
        }
        else if (appName === 'platform') {
            require('./platform.entry.js');
        }
    }
}

But the web package does not seem to be like this template:

weave_1 | ERROR in ./app/framework/src/app.js
weave_1 | Module not found: Error: Cannot resolve 'file' or 'directory' ./operations.entry.js in /web/app/framework/src
weave_1 |  @ ./app/framework/src/app.js 131:16-45
weave_1 | 
weave_1 | ERROR in ./app/framework/src/app.js
weave_1 | Module not found: Error: Cannot resolve 'file' or 'directory' ./platform.entry.js in /web/app/framework/src
weave_1 |  @ ./app/framework/src/app.js 136:16-43

However, I can see this structure in my dist directory:

css/                 
index.html           
media/               
platform.entry.js
framework.entry.js   
js/                  
operations.entry.js

So, I think everything will be fine. index.htmlloads the code framework.entry.js. Any ideas?

Answer 1

So, the hacker way that I ended up was simply to insert other packages on the fly:

class NotFound extends React.Component {
    render () {
        return null;
    }

    componentDidMount () {
        var path = this.context.router.getCurrentPath(),
            splitPath = path.split('/'),
            appName = splitPath[1];

         (function(d, script) {
             script = d.createElement('script');
             script.type = 'text/javascript';
             script.async = true;
             script.src = appName + '.bundle.js';
             d.getElementsByTagName('head')[0].appendChild(script);
         }(document));
    }
}