Question

我们正在使用webpack 1.14.0捆绑我们的应用程序。目前，我们正在寻找一种方法，我们需要动态地按需加载捆绑包。

我们的要求是从bundle动态加载readme.md和example.md文件。我正在尝试使用 require.ensure ，下面是我正在尝试的示例

//app.js entry point for webpack config
require("./login"); //sample login file just contains console log stmnt.

window.clickButton = function () {
    require.ensure(['./ensureTest'], function (require) {

       var a = require('./ensureTest');

    });

}
console.log("App Loaded"); 

//ensureTest.js   testing to load this module dynamically on demand
define([], function(){
    console.log("Loaded ensure runtime");
});

以下是我的webpack配置

module.exports = {
    entry: ["./app.js"],
    output: {
        filename: "bundle.js"
    },
    module:{
        loaders:[
            {
                test:/\.es6$/,
                exclude : "node_modules",
                loader:"babel-loader"
            }
        ]
    },
    resolve:{
        extensions :['', '.es6','.js']
    }
}

当我运行WebPack命令时，我能够看到创建了bundle.js和1.bundle.js文件。问题是当我点击一个按钮时，只有第一次点击是看到“已加载确保运行时”消息，该信息显示自1.bundle.js

再次点击按钮我看不到消息“已加载确保运行时间”

我的总体动机是动态加载包及其包含的模块。

Answer 1

我很确定你只能加载一次。加载后，它已经存在，因此不会再次调用console.log。

WebPack按需动态加载bundle

1 个答案: