使用Webpack和Babel的ES6动态导入

我一直在将Webpack用于我的ES6 JS项目，并且一直很好，直到开始使用动态导入为止。

我的工作原理（router.js）：

import { navigo } from "Navigo"; // router
import { clients } from "Controllers/clients.js";

const navigo = new Navigo();

navigo_router.on({
  '/clients': () => {
    clients.init();
  }
});

但是，我添加的页面/路线越多，导入到模块顶部的内容就越多。这是一个相对较大的应用程序，我要添加很多页面/路由，因此我需要动态加载它们以减小初始页面加载的大小。

因此，按照Webpack的动态导入文档，我尝试了以下方法，仅在调用相对路径时才加载控制器模块：

import { navigo } from "Navigo"; // router

const navigo = new Navigo();

navigo_router.on({
  '/clients': () => {
    import("Controllers/clients.js").then((clients) => {
      clients.init();
    });
  }
});

但是将其保存在我的编辑器中会导致Babel翻译错误；语法错误：“导入”和“导出”可能仅出现在顶层，而clients.init()在浏览器中进行测试时不会被调用。

经过一番阅读后，我发现我需要一个Babel插件才能将动态转换import()为require.ensure。因此，我使用以下命令安装了插件：

npm install babel-plugin-dynamic-import-webpack --save-dev

并在我的babel.rc文件中声明了插件

{ "plugins": ["dynamic-import-webpack"] }

安装插件后，转码错误消失，检查我的转码后，我发现dynamic import()s实际上已更改require.ensure为预期的值。但是现在测试时出现以下浏览器错误：

Error: Loading chunk 0 failed.
Stack trace:
u@https://<mydomain.com>/js/app.bundle.js:1:871
SyntaxError: expected expression, got '<' 0.app.bundle.js:1
Error: Loading chunk 0 failed.

我不明白为什么它0.app.bundle.js使用0.前缀进行引用，因此我检查了output / dist文件夹，现在在其中有一个新文件，名为0.app.bundle.js：

0.app.bundle.js      1,962bytes
app.bundle.js        110,656bytes

我想象这个新的捆绑文件是动态导入的模块clients.js。

我仅向该一条路线添加了动态导入，并保留了所有其他路线。因此，在测试期间，我可以查看所有路由，但一条/clients路由现在会抛出上述错误。

我现在完全迷失了，希望有人可以帮助我超越终点线。这个新文件是什么？0.app.bundle.js我应该如何在应用程序中使用它/包括它？

我希望我已经对自己进行了足够清楚的解释，并期待收到任何答复。