带有动态需求的 Webpack 异步加载

Question

我对 webpack 很陌生（几个小时）。

我想将非常棒的异步加载与动态需求结合起来。 假设我想异步地需要两个文件之一，“./DIRECTORY/FOO”或“./DIRECTORY/BAR”。 这是一个非动态版本，我认为它按我的预期工作：

if (condition_holds) {
  require.ensure([], function()
                     {
                       require('./DIRECTORY/FOO');
                     });
}
else {
  require.ensure([], function()
                     {
                       require('./DIRECTORY/BAR');
                     });
}

这是我尝试使这种动态：

var file_name = condition_holds ? "FOO" : "BAR";
require.ensure([], function()
                   {
                     require('./DIRECTORY/' + file_name);
                   });

但是，当我使用 webpack 编译这些代码时，我得到了非常不同的结果。 对于第一个（非静态），生成两个不同的文件，一个用于 FOO，一个用于 BAR，并且仅异步加载该文件。 对于第二个，只生成一个文件，其中包含 FOO 和 BAR。 这不是我所期待或想要的。 我希望生成单独的文件，每个模块一个，并且只异步下载该模块。

这是预期的行为吗？ 如果是这样，为什么以及如何使用动态需要但仍然获得单独的模块，每个模块单独加载？

这是我的 webpack.config.js：

module.exports =
{
  entry: {
  bundle: './main.js'
  },
  output: {
    path: './public/js/',
    filename: '[name].js',
    publicPath: "/js/"
  }
};

Answer 1

问题是 webpack静态分析你的源代码。 当它看到这个：

require('./DIRECTORY/' + file_name);

...它创建了一个上下文，它是一个在运行时可以解析为捆绑模块的映射。 因为根据静态分析， file_name可以是任何东西（webpack 实际上不会运行你的代码来知道什么是可用的），它确定了所有可能在./DIRECTORY/下的./DIRECTORY/并将它们包含在你的包中，这不是你想要的.

确实有两个问题需要解决：

1. 让 webpack 将你的文件拆分成单独的块
2. 动态加载这些块

看起来有人创建了一个可以解决这两个问题的bundle-loader 。

var file_name = condition_holds ? "FOO" : "BAR";
var dynamicLoad = require('bundle!./DIRECTORY/' + file_name);
dynamicLoad(function (loadedModule) {
  // Use the module
});

根据这篇文章，这应该将上下文中的每个潜在文件拆分为自己的包，并为您提供一种在运行时异步加载这些包的方法。