使用 webpack 将 aurelia 应用程序拆分为按需捆绑包的正确方法是什么？

Question

我的应用程序被分成不同的模块，例如：src/boot/**/*.js, src/core/**/*.js, src/some-other-module/** /*.js 和组件目录中的相同目录。

如何使用 webpack 将我的应用程序捆绑到按需捆绑包中？我想要这样的模块：boot、core、some-other-module；我想按需加载它们。例如，第一个页面 - 登录页面 - 应该只加载 boot 包，成功登录后应该加载 core 包。

我已经试过了webpack.config.js:

// bundles.js
const glob = require('glob');
module.exports = {
  fw: ['aurelia-bootstrapper'],
  boot: [
    ...glob.sync('src/*.js').map(entry => entry.replace('src/', '')),
    ...glob.sync('src/boot/**/*.js').map(entry => entry.replace('src/', '')),
    ...glob.sync('components/boot/**/*.js').map(entry => entry.replace('components/', ''))
  ],
  core: [
    ...glob.sync('src/core/**/*.js').map(entry => entry.replace('src/', '')),
    ...glob.sync('components/core/**/*.js').map(entry => entry.replace('components/', ''))
  ],
  'some-other-module': [
    ...glob.sync('src/some-other-module/**/*.js').map(entry => entry.replace('src/', '')),
    ...glob.sync('components/some-other-module/**/*.js').map(entry => entry.replace('components/', ''))
  ],
};

// webpack.config.js
const prodBundles = require('./bundles.js');
...
module.exports = ({ production, server, extractCss, coverage } = {}) => ({
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
    modules: [srcDir, componentsDir, 'node_modules', 'libs']
  },
  entry: prodBundles,
...
});

但应用甚至无法使用此设置并抛出此类错误：

Unhandled rejection Error: Error invoking Compose. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: Constructor Parameter with index 0 cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: Constructor Parameter with index 0 cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at Object.invokeWithDynamicDependencies (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:35219:13)
    at InvocationHandler.invoke (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:35204:166)
    at Container.invoke (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:35475:23)
    at ProviderResolver.get (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31046:72)
    at Container.get (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:35414:21)
    at Container.elementContainerGet [as get] (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31101:15)
    at HtmlBehaviorResource.create (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:33088:56)
    at applyInstructions (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31203:31)
    at ViewFactory.create (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31424:7)
    at BoundViewFactory.create (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31304:33)
    at If._show (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:36666:36)
    at If.bind (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:73912:12)
    at Controller.bind (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:32473:22)
    at View.bind (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:30462:22)
    at Controller.bind (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:32465:17)
    at Controller.automate (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:32410:10)
End Inner Error Stack
------------------------------------------------

    at new AggregateError (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:8478:11)
    at Container.invoke (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:35477:13)
    at ProviderResolver.get (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31046:72)
    at Container.get (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:35414:21)
    at Container.elementContainerGet [as get] (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31101:15)
    at HtmlBehaviorResource.create (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:33088:56)
    at applyInstructions (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31203:31)
    at ViewFactory.create (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31424:7)
    at BoundViewFactory.create (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:31304:33)
    at If._show (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:36666:36)
    at If.bind (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:73912:12)
    at Controller.bind (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:32473:22)
    at View.bind (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:30462:22)
    at Controller.bind (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:32465:17)
    at Controller.automate (http://localhost:9000/common.595063c809425d78a6ec.bundle.js:32410:10)
    at http://localhost:9000/common.595063c809425d78a6ec.bundle.js:33554:18

所以，现在我什至无法在没有按需加载的情况下将我的应用程序打包。

另外请注意，我使用 sass-loader。

P.S。我已经阅读了官方的 aurelia 文档，但它看起来已经过时了。

Answer 1

我在这里找到了答案：https://ilikekillnerds.com/2017/03/code-splitting-aurelia-webpack-applications/

主要思想是 PLATFORM.moduleName 有两个参数：moduleId 和 chunkName。当指定 chunkName 时，Aurelia 通知 webpack 创建块，然后按需加载。

使用 webpack 将 aurelia 应用程序拆分为按需捆绑包的正确方法是什么？

What is the correct way to split an aurelia app into on-demand bundles using webpack?

webpack

aurelia