动态加载另一个项目的 webpack 包

Question

这是我想要做的：

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

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

MainAppapp.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，但如果我想拥有单独的供应商和应用程序包，我不清楚该怎么做。

Answer 1

这只是一个建议，但是有什么阻止您让 MainApp 将 SubApp 的文件捆绑到其分发中，从而有效地将 SubApp 代码放在两个分发中？

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

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

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

至于如何真正做到这一点，我仍然建议尽可能重用 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 的独立/资源配置将从 base 配置加载所有基本值，同时根据它是否独立运行来应用设置。

此外，由于看起来您的 SubApp 和 MainApp 都在同一个目录中提供服务（这是正确的吗？），合并这些配置时您不会遇到目录问题。一切都好！但是，如果您确实遇到问题，只需在您的 resource SubApp 配置中使用“../”作为您的条目。

我希望这个答案可以激发您项目的一些可扩展性！我也遇到过这类问题，通常 webpack 合并就是答案。这也适用于在 dev/prod 模式下运行，因此请务必考虑这些可能性。