Webpack:ES6模块,代码拆分和bundle-loader

时间:2016-06-13 15:48:57

标签: ecmascript-6 webpack code-splitting

TL; DR: 您能解释一下,使用Webpack进行代码拆分需要bundle-loader吗?

当我开始将基于Backbone的应用程序从Require.js迁移到Webpack时,我记得路由器中的这种require语句:

someMatchedRoute: function () {
    require(['path-to-file'], function(module) {
        // doing something with the loaded module
        module();
    });
}

会将所需的代码放在与其余代码相同的包中,并且为了生成切换到特定路由时动态需要的单独文件,我需要使用bundle-loader,如这样:

// a function executed when the user’s profile route is matched
someMatchedRoute: function () {
    require('bundle!path-to-file')(function(module) {
        // doing something with the loaded module
        module();
    });
}

现在,当我将我的代码库迁移到ES6模块并在Webpack文档中使用require.ensure语法described时:

someMatchedRoute: function () {
    require.ensure(['path-to-file'], function(require) {
        var loadedModule = require('path-to-file');
        // doing something with the loaded module
        loadedModule();
    });
}

我不确定是否需要bundle-loader才能生成多个块并动态加载它们。如果我这样做,require调用会在require.ensure或回调中的require中进行?或者两者都有?这一切都让人感到困惑。

0 个答案:

没有答案