首页 文章

WebPack按需动态加载bundle

提问于
浏览
1

我们使用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

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

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

1 回答

  • 0

    我很确定你只能加载一次 . 一旦你加载它,它已经存在,所以console.log不会再被调用 .

相关问题