Question

我需要动态地要求模块与webpack进行异步加载。我的目标是遍历一个数组并加载这些模块（这是我的反应路由器用途，在这里并不重要）。

这是我的代码：

const arr = ['some-module', 'module-2'];
arr.map(moduleName => {
  require.ensure([], require => {
    if(process.env.IS_BROWSER) { //for react server-render because of babel 6
      cb(null, require(moduleName));
    }
    else {
      cb(null, require(moduleName).default);
    }
  });
}

它在服务器上运行良好，但在前端，不会制作和加载其他包。你知道怎么解决吗？谢谢。

Answer 1

您可能知道Webpack是一个静态模块捆绑器，所有模块都应该静态解析。它不支持解析完全动态的资产表达式。

它可以静态解决某些动态表达式，例如

var a = 'a';
require.ensure([], function (require) {
   // all dynamic entry modules inside /dynamic/ folder
   console.log(require('./dynamic/' + a));
});

如果要为每个模块生成一个块，可以将require.context与bundle-loader结合使用。

var a = './a';
require.context('bundle!./app')(a)(function(moduleTest){
    console.log(moduleTest);
});

Webpack require.ensure具有动态字符串路径

1 个答案: