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组成;

现在我正在尝试使用动态异步需求来获得相同的行为：

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.context，在目录中搜索所有足够的文件（实际上是modules dir中的所有js文件）并将它们捆绑到一个文件中。

强制webpack为您需要使用require.ensure的每个文件创建单独的包。但是将每个文件包装进去是一个非常繁琐的过程，所以我相信你正在寻找bundle loader。它会自动为您完成。

异步模块加载时命名的块

1 个答案: