Webpack require.ensure 带有动态字符串路径答案

【问题标题】：Webpack require.ensure with dynamic string pathWebpack require.ensure 带有动态字符串路径
【发布时间】：2017-04-15 14:09:43
【问题描述】：

我需要动态加载模块以使用 webpack 进行异步加载。我的目标是遍历一个数组并加载这些模块（这是为了我的 react-router 目的，在这里并不重要）。

这是我的代码：

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);
    }
  });
}

它在服务器上运行良好，但在前端，不会制作和加载额外的捆绑包。请问你知道怎么解决吗？谢谢。

【问题讨论】：

标签： node.js reactjs webpack require commonjs

【解决方案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);
});

【讨论】：