WebPack 按需动态加载包

Question

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

我们的要求是从包中动态加载 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

显示的 "Loaded ensure runtime" 消息

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

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

Answer 1

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

WebPack 按需动态加载包

WebPack Dynamically load bundle on demand

javascript

bundling-and-minification

webpack

webpack-2