Question

我对webpack非常新（小时）。

我希望将异步加载与动态需求结合起来，这非常棒。假设我想要异步地需要两个文件中的一个，＆＃39; ./ DIRECTORY / FOO＆＃39;或＆＃39; ./ DIRECTORY / BAR＆＃39;。这是一个非动态版本，我认为，它可以像我期望的那样工作：

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

...它创建了一个context，它是一个在运行时可以解析为捆绑模块的映射。因为file_name可以任何根据静态分析（webpack实际上不会运行您的代码来了解可用的内容），它会确定所有可能位于./DIRECTORY/和var file_name = condition_holds ? "FOO" : "BAR"; var dynamicLoad = require('bundle!./DIRECTORY/' + file_name); dynamicLoad(function (loadedModule) { // Use the module });下的文件将它们包含在您的捆绑包中，这不是您想要的。

要解决两个问题：

让webpack将文件拆分为单独的块
动态加载这些块

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

{{1}}

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

Webpack异步加载与动态需求

1 个答案: