Webpack加载代码动态拆分包

Question

So I want to split my application code into 3 bundles using webpack. I'm able to get my framework bundle loading and working, but I can't get the other two bundles to load on the fly. Heres my webpack config:

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'm using react router to try and load the other app bundles 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 webpack doesn't seem to like this pattern:

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 in my dist directory this structure:

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

So I would think it would be fine. index.html is loading the framework.entry.js code. Any ideas?

Answer 1

So the hacky way I ended up doing this was by just injecting the other bundles 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));
    }
}