Question

以下是我尝试做的事情：

使用webpack构建SubApp时，会创建vendor.js和app.js包。以这种方式构建的应用程序已经可用拥有MainApp，可动态加载SubApp的供应商和应用包。这不起作用。

加载捆绑包时，我收到以下错误：

Cannot read property 'call' of undefined

所有代码我都使用：

SubApp webpack config：

{
  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 config：

{
  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，但如果我想要单独的供应商和应用包，我不清楚如何做到这一点

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

0 个答案: