Question

我一直在尝试使用webpack的bundle-loader插件在一个require中加载多个文件。以下是需要单个文件的方法。

var waitForChunk = require("bundle-loader!./file.js");

// To wait until the chunk is available (and get the exports)
//  you need to async wait for it.
waitForChunk(function(file) {
    // use file like is was required with
    // var file = require("./file.js");
});
// wraps the require in a require.ensure block

但无法弄清楚如何实现这一点，任何想法？

Answer 1

到目前为止，我在文档和其他示例中看到，我认为在require中使用加载器不支持多个文件;而是可以加载单个文件/包。

尽管webpack具有使用loaders in require加载动态依赖关系的功能，但webpack文档不鼓励使用它。

如果你想要你的脚本，尽量避免使用它环境不可知（node.js和浏览器）。使用配置用于指定加载器的约定（see it here）。

bundle-loader将文件包装在require.ensure块中。那么为什么我们不采用最初的require.ensure方式呢？您可以按如下方式加载多个动态依赖项：

<强> require.ensure(dependencies, callback);

require.ensure方法确保每个依赖项调用回调时可以同步需要依赖项。使用require函数作为参数调用回调。

请参阅以下示例。在您调用require函数之前，require.ensure内的模块loadAsyncDeps d未加载。

示例1：

function loadAsyncDeps(moduleName, cb)
    // `module-a` and `module-b` can now be split into different files,
    // and the callback function will not run until they have loaded.
    require.ensure(['./module-a', './module-b'], function(require) {
        var modules = {
            a: require('./module-a'),
            b: require('./module-b'),
            // ...
        };

        cb(modules[moduleName]); // callback fn which returns required module
    });
}

示例2：

function loadAsyncDeps(moduleName, cb)
    require.ensure([], function() {  //empty first param
        var modules = {
            a: require('./module-a'),
            b: require('./module-b'),
            // ...
        };

        cb(modules[moduleName]); // callback fn which returns required module
    }, 'my-lazy-modules');
}

此处require.ensure定义了一个分裂点。一切都进入一个名为my-lazy-modules的块。

更新

如何为每个文件创建单独的块？即，module-a和module-b应该使用正确的名称转到两个不同的块。

为加载module-a和module-b

创建单独的函数

此处module-a-1和module-a-1是module-a

的依赖关系

require.ensure(['./module-a', './module-a-1', './module-a-2'], function(require) {
    var a = require('./module-a');
}, 'lazy-module-a');

module-b-1和module-b-2是module-b的依赖关系模块

require.ensure(['./module-b', './module-b-1', './module-b-2'], function(require) {
    var b = require('./module-b');
}, 'lazy-module-b');

如上所述，在加载依赖关系数组中的所有模块之前不会调用回调函数（并且对于同步require是安全的。）

使用webpack bundle loader动态需要多个文件

1 个答案:

更新