动态另一个项目

这里装载的WebPack束就是我想要做的：动态另一个项目

有一个SubApp当用的WebPack建，创建一个vendor.js和app.js束。以这种方式构建的应用程序已经可用有一个MainApp，动态加载供应商和应用程序包SubApp。这不起作用。

当装载包，我发现了以下错误：

Cannot read property 'call' of undefined

我使用所有代码代码：

SubApp的WebPack配置：

{ 
    context: path.resolve(__dirname, './src'), 
    entry: { 
    app: './app.js', 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: '[name].js', 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks(module) { 
     return module.context && module.context.indexOf('node_modules') >= 0; 
     }, 
    }), 
    ], 
};

SubApp app.js：

import angular from 'angular'; 

angular.module('barApp', []) 
.component('foobar', { 
    template: `BAR APP`, 
});

MainApp的WebPack配置：

{ 
    context: path.resolve(__dirname, './src'), 
    entry: { 
    app: './nav.js', 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: '[name].js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.html$/, 
     use: [{ loader: 'html-loader' }], 
     }, 
    ], 
    }, 
    devServer: { 
    contentBase: path.resolve(__dirname, './src'), 
    }, 
};

MainApp app.js：

Promise.all([ 
    import('./SubApp/dist/vendor.js'), 
    import('./SubApp/dist/app.js'), 
]).then(([ vendor, app ]) => { 
    console.log('Success'); 
}).catch(err => { 
    console.log("Chunk loading failed", err); 
});

运行MainApp（无论是从开发服务器或内建文件）会产生：Chunk loading failed TypeError: Cannot read property 'call' of undefined。

我正在使用webpack 2.5.0。

编辑：在一些调查中，它看起来像我可以让我的当前设置工作，如果我装的供应商和顺序的应用程序，这样做会但装载显著放缓，因为我需要等待大（供应商）捆绑软件在读取实际应用程序之前首先加载。

AFAIK，动态加载的模块仍应按请求的顺序执行，而不是按照哪个请求先完成。

有一些指针，我可以将SubApp作为library打包，但如果我想拥有单独的供应商和应用程序捆绑包，则不知道该怎么做。

来源

2017-05-07 Maciej Gurban

这只是一个建议，但有没有什么能阻止你让MainApp将SubApp的文件捆绑到它的发行版中，从而有效地在两个发行版中使用SubApp代码？

这就是我现在看到的，如果我没有弄错，用户如何访问您的项目。

MainApp, Standalone -> SubApp as a resource 
SubApp, Standalone

尽管它可能看起来像你把相同的代码在两个地方，我认为这将导致几个好处，包括能够设定为SubApp一些独立的环境设置，这将是多余或导致冲突您的主应用程序的环境。

至于如何真正做到这一点，我仍然建议尽可能重新使用webpack配置。webpack-merge是一个伟大的包，这个，webpack配置或不，它合并漂亮，可定制。

<= means 'merged from' 

webpack.subapp.base.config.js 
webpack.mainapp.config.js <= webpack.subapp.resource.js <= webpack.subapp.base.config 
webpack.subapp.standalone.js <= webpack.subapp.base.config.js

所以你独立/ SubApp的资源CONFIGS将负载从base配置的所有基本值，而将基于无论是独立运行或不设置。

此外，由于它看起来您的SubApp和MainApp都在同一个目录中（这是否正确？），因此合并这些配置时不会遇到目录问题。一切都好！但是如果遇到问题，只需在SubApp的resource配置中使用'../'作为输入。

我希望这个答案可以激发你的项目的一些可扩展性！我也有过这些类型的问题，通常webpack合并就是答案。这也适用于在dev/prod模式下运行时，所以一定要考虑这些可能性。

来源

2017-05-08 06:18:28

嗨威廉。我使用异步模块加载的原因是为了避免做你的建议。 MainApp会立即加载，因为在我的情况下它需要知道需要在某个点上按需加载的模块。在现实生活中，不会有一个，而是多个SubApp。将它们全部发送到MainApp意味着向客户端发送几MB包，而不管它们是否需要每个SubApp有或没有的功能（并且在缩小和压缩后）。 –

无论哪种方式，我真正的问题是能够同时加载所有文件，但能够按列出的顺序执行它们 - 如果我将

动态另一个项目

回答

相关问题