Webpack加载代码会动态拆分包

Webpack loading code split bundles on the fly

本文关键字：拆分动态加载代码 Webpack 更新时间：2023-09-26

所以我想用webpack把我的应用代码分成3个包。我可以让我的框架包加载并工作，但我不能让其他两个包动态加载。这是我的webpack配置:

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/'
    }
}

如果URL匹配，我将使用react router来加载其他应用包:

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');
        }
    }
}

但是webpack似乎不喜欢这个模式:

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

但是我可以在dist目录中看到这样的结构:

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

所以我认为它会很好。index.html正在加载framework.entry.js代码。什么好主意吗?

所以我最终做这件事的hack方式是通过动态注入其他包:

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));
    }
}