WebPack根据需要动态加载bundle



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

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

//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.jss文件的创建。问题是当我点击一个按钮时,只有第一次点击才会看到1.bundle.js 显示的"Loaded ensure runtime"消息

再次点击按钮,我看不到消息"Loaded ensure runtime">

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

我敢肯定你只能加载一次。一旦你加载了它,它就已经在那里了,所以console.log就不会再被调用了。

最新更新