异步模块加载上的命名块

Question

如果您有一个条目main.js 包含此类内容：

require.ensure('a', function(module){
    //
}, 'chunk1');

require.ensure('b', function(module){
    //
}, 'chunk1');

require.ensure('c', function(module){
    //
}, 'chunk2');

require.ensure('c', function(module){
    //
}, 'chunk2');

Webpack 将输出 3 个文件：main.js、chunk1.js 和 chunk2.js 其中 chunk1 由模块 a 和 b 组成，而 chunk2 由模块 c 和 d 组成；

现在我正在尝试使用 dynamic asynchronous require 来获得相同的行为：

function dynamicLoad(letter){
    require(['./modules/' + letter + '.js'], function(module){
        //
    });
}

这里我们没有告诉 webpack 如何将模块合并在一起，所以输出将是：main.js 和 1.1.js 其中 1.1 由所有模块 a、b、c 和 d 组成。

有没有办法定义我们希望（或喜欢）如何将模块合并到块中？

更新：

我发现这个插件split-by-name-webpack-plugin 完全符合我的要求，但仅用于块条目，不适用于动态块。 我会研究一下这个插件，看看我是否可以让它按我的意愿工作。

Answer 1

这是因为所有像 require(['./modules/' + letter + '.js'] 这样的动态表达式实际上都是 not so dynamic 并且 webpack 在构建步骤中解析它们。因此，它在内部将您的 require 重写为 require.context，在目录中搜索所有足够的文件（实际上是 modules 目录中的所有 js 文件）并将它们捆绑到一个文件中。

要强制 webpack 为您需要使用的每个文件创建单独的包，请使用 require.ensure。但是将每个文件包装到其中是一个非常繁琐的过程，所以我相信您正在寻找bundle loader。它会自动为您执行此操作。