Webpack异步加载与动态需求

Webpack Async Loading with Dynamic Require

本文关键字：动态 需求 加载 异步 Webpack      更新时间：2023-09-26

我是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/"
  }
};

问题是webpack 静态地分析你的源代码。当它看到如下内容:

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

…它创建了一个上下文，该上下文是一个映射，在运行时可以解析为绑定的模块。因为根据静态分析，file_name可以是任何的文件(webpack实际上不会运行你的代码来知道什么是可用的)，它会确定所有可能在./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
});

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

相关文章：