Webpack 网页: ;；使用外部注入需求

我使用LaravelMix和Webpack从基本框架和实例结构编译SPA

（为了便于阅读，以下所有代码均缩写。）

我使用

vue route generator

从表中构建路由器：

const routes = require('vue-route-generator')
.generateRoutes({
    '~', // Path to directory of page components.
    importPrefix: pages+'/', // String to add to importing component path.
    dynamicImport: true, // Use dynamic import expression (`import()`) to import component.
    nested: false, // DO NOT always treat generated route path as nested.
});

vue路由生成器

生成我期望的代码：

function Index() {
  return import(/* webpackChunkName: "index" */ '~/index.vue')
}
function People() {
  return import(/* webpackChunkName: "people" */ '~/people.vue')
}
export default [...]

我定义了一个外部接口，这样我就可以将我的路由作为

require

ment注入到框架中

mix.webpackConfig(webpack => {
    return {
        ...
        externals: [
            { routes, ... }
        ]
    };
});

注射发生在我预料之中。。。几乎。当我在devtools中检查注入的代码时，我看到：

/***/ "routes":
/*!*!*\
  !*** external "Index() {\n  return import(\n    /* webpackChunkName: \"index\" *_/ '~/index.vue'\n  )\n}\nfunction People() {\n  return import(\n    /* webpackChunkName: \"people\" *_/ '~/people.vue'\n  )\n}\n\nexport default [\n  {\n    name: 'index',\n    path: '/',\n    component: Index\n  },\n  {\n    name: 'people',\n    path: '/people',\n    component: People\n  }\n]\n" ***!
  \***/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = Index() {
  return import(/* webpackChunkName: "index" */ '~/index.vue')
}
function People() {
  return import(/* webpackChunkName: "people" */ '~/people.vue')
}
export default [...]

显然应该是这样的：

/***/ (function(module, exports) {
function Index() {
  return import(/* webpackChunkName: "index" */ '~/index.vue')
}
function People() {
  return import(/* webpackChunkName: "people" */ '~/people.vue')
}
module.exports = [...]

我需要做什么才能使Webpack正确地注入路由代码