通过require.ensure() 方法引入的模块，会自动进行代码分割，生成单独的chunk文件。

example.js

function getTemplate(templateName, callback) {
    require.ensure([], function(require) {
        callback(require("../require.context/templates/"+templateName)());
    });
}
getTemplate("a", function(a) {
    console.log(a);
});
getTemplate("b", function(b) {
    console.log(b);
});

webpack.config.js

module.exports = {
    optimization: {
        chunkIds: "deterministic" // To keep filename consistent between different modes (for example building only)
    }
};

example.js中模块的路径有变量，所以wenpack会把”../require.context/templates/“路径下的文件都打包进来。

dist/output.js

...
((module, __unused_webpack_exports, __webpack_require__) => {
var map = {
    "./a": "../require.context/templates/a.js",
    "./a.js": "../require.context/templates/a.js",
    "./b": "../require.context/templates/b.js",
    "./b.js": "../require.context/templates/b.js",
    "./c": "../require.context/templates/c.js",
    "./c.js": "../require.context/templates/c.js"
};
function webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
}
function webpackContextResolve(req) {
    if(!__webpack_require__.o(map, req)) {
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    }
    return map[req];
}
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "../require.context/templates sync recursive ^\\.\\/.*$";
/***/ })
...