Question

StackOverflow中有几个类似的问题，但我还没有真正找到答案，似乎应该是可能的。这是我想要实现的目标：

我的应用程序被webpack拆分为多个块（我使用es6模块）。然后在运行时我想根据需要加载块（例如：当用户导航到特定页面时，他首先需要为该页面加载javascript然后执行回调）。我认为这个概念在GWT中是开创性的（但我可能错了）。

目前在webpack生成的init.js中，我看到以下代码：

/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/        // "0" is the signal for "already loaded"
/******/        if(installedChunks[chunkId] === 0)
/******/            return callback.call(null, __webpack_require__);

/******/        // an array means "currently loading".
/******/        if(installedChunks[chunkId] !== undefined) {
/******/            installedChunks[chunkId].push(callback);
/******/        } else {
/******/            // start chunk loading
/******/            installedChunks[chunkId] = [callback];
/******/            var head = document.getElementsByTagName('head')[0];
/******/            var script = document.createElement('script');
/******/            script.type = 'text/javascript';
/******/            script.charset = 'utf-8';
/******/            script.async = true;

/******/            script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app","1":"otherapp"}[chunkId]||chunkId) + ".js";
/******/            head.appendChild(script);
/******/        }
/******/    };

而这似乎正是我所需要的。但是有几个问题。首先，requireEnsure函数没有暴露给我的应用程序，第二个问题是，即使我手动公开它（通过在我的代码中注入），它也没有像我期望的那样正常工作，因为它前缀.js与chunkId +“。”在获取javascript：.. js时，结果是重复模块名称。以下是我要说的话：

script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app","1":"otherapp"}[chunkId]||chunkId) + ".js";

有办法实现吗？

Answer 1

您似乎在寻找code splitting。

简而言之，您必须在代码中明确声明事物是有条件的，例如在if中包装导入（不是es6导入，因为它们必须位于顶层，但CommonJS er RequireJS），或者使用require.ensure。

This博客文章也可能对您有所帮助。

动态加载webpack块

1 个答案: