我正在使用Webpack,希望将客户端代码分成多个部分,并在用户需要时加载它们。
这是我的文件结构:
app.js <-- Entry point as introduced to Webpack
Module.js <-- To be loaded dynamically
app.js
和 Module.js
之间没有直接的连接,相反,第二个文件是通过以下方式由第一个文件加载的:
require.ensure([], (require) => {
let path = "Module";
let module = require("./" + path).default;
});
我使用"./" + path
,只是为了确保Webpack在静态解析路径时不会聪明地去处理它。无论如何,在webpack-dev-server的开发模式中这个代码可以工作。我的意思是在我触发上述代码运行事件之前,Module.js
尚未被下载。之后,它被加载并完美地执行。
但是当我将项目打包为生产环境时,它停止工作,并且在我触发下载事件时就出现以下错误(在浏览器中),而不甚至尝试发送请求:
Uncaught Error: Cannot find module './Module'.
此外,当我动态组合路径时(就像上面的代码一样),构建过程会发出以下警告:
WARNING in ./src/app/app.js Critical dependencies: 74:34-47 the request of a dependency is an expression
如何正确配置Webpack以支持代码分割以便可以动态下载?
我已经测试了@wollnyst提供的解决方案,以下是结果。当我像这样实现时,它有效:
require.ensure(["./Module"], (require) => {
let path = "Module";
let module = require("./" + path).default;
});
但是我不想这样,我想要像这样:
let path = "Module";
require.ensure(["./" + path], (require) => {
let module = require("./" + path).default;
});
现在它在浏览器中出现了运行时错误:
Uncaught TypeError: webpack_require(...).ensure 不是一个函数
仍然没有运气!
require.ensure
会处理这个问题。在你的情况下,静态路径就可以正常工作。 - raiyanrequires
。你确切拥有什么结构?也许定义一个自己的 context 可能会有帮助。 - wollnyst