WebPack Dynamically load bundle on demand

Question

We are using webpack 1.14.0 to bundle our application. Currently we are looking for an approach where we need to load a bundle on demand dynamically.

Our requirement is to load readme.md and example.md files dynamically from bundle. I am trying using require.ensure, below is the sample that I am trying

//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");
});

Below is my webpack config

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

When I run WebPack command I am able to see bundle.js and 1.bundle.js file created. Problem is when I am clicking on a button, only for the first time click is see "Loaded ensure runtime" message which is showing from 1.bundle.js

Clicking again on the button I cannot see the message "Loaded ensure runtime"

My overall motive is to load the bundle and its contained module dynamically.

Answer 1

I'm pretty sure you can only load it once. Once you load it, it's already there so the console.log won't get called again.