Question

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

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

我试过这个webpack.config.js：

builder.show();

但应用程序甚至没有使用此设置抛出此类错误：

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

所以，现在我甚至无法在没有按需加载的情况下将我的应用程序分成捆绑包。

另外注意我使用sass-loader可能很重要。

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

Answer 1

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

主要思想是PLATFORM.moduleName接受两个参数：moduleId和chunkName。当指定chunkName时，Aurelia会通知webpack创建一个chunk，然后根据需要加载它。

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

1 个答案: