Webpack 动态加载另一个项目的Web包包包

以下是我想做的：

有一个

子应用

，当使用webpack构建时，会创建一个vendor.js和app.js捆绑包。以这种方式构建的应用程序已经可以工作了。拥有一个

MainApp

，可以动态加载

子应用的供应商和应用程序包。这不管用

加载捆绑包时，出现以下错误：

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

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

SubApp
app.js:

import angular from 'angular';

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

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

{
  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:

import angular from 'angular';

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

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
（无论是从dev服务器还是构建文件）将产生：
区块加载失败类型错误：无法读取未定义的属性“调用”

我正在使用网页2.5.0

编辑：经过调查，如果我按顺序加载供应商和应用程序，看起来我可以使当前设置正常工作，但是这样做会显著降低加载速度，因为在获取实际应用程序之前，我需要先等待大（供应商）包加载

好吧，动态加载的模块仍然应该按照请求的顺序执行，而不是按照请求首先完成的顺序执行

有一些建议我可以将
SubApp
打包为一个包，但如果我想拥有独立的供应商和应用程序捆绑包，我不清楚该如何做。
这只是一个建议，但是否有任何东西阻止你让MainApp将SubApp的文件捆绑到其发行版中，在两个发行版中有效地拥有子应用程序代码

如果我没有弄错的话，这就是我现在看到的用户访问项目的方式

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

虽然看起来您在两个地方放置了相同的代码，但我认为这会带来一些好处，包括能够为子应用设置一些独立的环境设置，这些设置可能是冗余的，或者会在主应用的环境中引起冲突

至于如何真正做到这一点，我仍然建议尽可能重复使用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

你好，威廉。我使用异步模块加载的原因是为了避免执行您建议的操作。MainApp将在瞬间加载，因为在我的情况下，它需要知道的只是需要在某个点按需加载的模块。在现实生活中，只有多个子应用程序，而不是一个子应用程序。将它们全部发送到MainApp意味着将几个MB的包发送到客户端，而不管它们是否需要每个子应用所具有的功能（这是在缩小和压缩之后）。无论哪种方式，我真正的问题是能够同时加载所有文件，但要能够按照它们列出的顺序执行它们，就像我在HTML页面中包含标记一样。