# example.js ``` javascript function getTemplate(templateName) { return require("./templates/"+templateName); } console.log(getTemplate("a")); console.log(getTemplate("b")); ``` # templates/ * a.js * b.js * c.js All templates are of this pattern: ``` javascript module.exports = function() { return "This text was generated by template X"; } ``` # js/output.js ``` javascript /******/ (function webpackBootstrap(modules) { /******/ var installedModules = {}; /******/ function require(moduleId) { /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ modules[moduleId].call(null, module, module.exports, require); /******/ module.loaded = true; /******/ return module.exports; /******/ } /******/ require.e = function requireEnsure(chunkId, callback) { /******/ callback.call(null, require); /******/ }; /******/ require.modules = modules; /******/ require.cache = installedModules; /******/ return require(0); /******/ })({ /******/ c: "", /***/ 0: /*!********************!*\ !*** ./example.js ***! \********************/ /***/ function(module, exports, require) { function getTemplate(templateName) { return require(/*! ./templates */ 4)("./"+templateName); } console.log(getTemplate("a")); console.log(getTemplate("b")); /***/ }, /***/ 1: /*!************************!*\ !*** ./templates/a.js ***! \************************/ /***/ function(module, exports, require) { module.exports = function() { return "This text was generated by template A"; } /***/ }, /***/ 2: /*!************************!*\ !*** ./templates/b.js ***! \************************/ /***/ function(module, exports, require) { module.exports = function() { return "This text was generated by template B"; } /***/ }, /***/ 3: /*!************************!*\ !*** ./templates/c.js ***! \************************/ /***/ function(module, exports, require) { module.exports = function() { return "This text was generated by template C"; } /***/ }, /***/ 4: /*!****************************!*\ !*** ./templates ^\.\/.*$ ***! \****************************/ /***/ function(module, exports, require) { var map = { "./a": 1, "./a.js": 1, "./b": 2, "./b.js": 2, "./c": 3, "./c.js": 3 }; function webpackContext(req) { return require(webpackContextResolve(req)); }; function webpackContextResolve(req) { return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }()); }; webpackContext.keys = function webpackContextKeys() { return Object.keys(map); }; webpackContext.resolve = webpackContextResolve; module.exports = webpackContext; /***/ } /******/ }) ``` # Info ## Uncompressed ``` Hash: 7e957458daf8e24487e04864c255e550 Time: 35ms Asset Size Chunks Chunk Names output.js 2458 0 main chunk {0} output.js (main) 613 [0] ./example.js 150 [built] {0} [1] ./templates/a.js 82 [built] {0} context element ./a [4] ./templates ^\.\/.*$ context element ./a.js [4] ./templates ^\.\/.*$ [2] ./templates/b.js 82 [built] {0} context element ./b [4] ./templates ^\.\/.*$ context element ./b.js [4] ./templates ^\.\/.*$ [3] ./templates/c.js 82 [built] {0} context element ./c [4] ./templates ^\.\/.*$ context element ./c.js [4] ./templates ^\.\/.*$ [4] ./templates ^\.\/.*$ 217 [built] {0} cjs require context ./templates [0] ./example.js 2:8-44 ``` ## Minimized (uglify-js, no zip) ``` Hash: 7e957458daf8e24487e04864c255e550 Time: 103ms Asset Size Chunks Chunk Names output.js 844 0 main chunk {0} output.js (main) 613 [0] ./example.js 150 [built] {0} [1] ./templates/a.js 82 [built] {0} context element ./a [4] ./templates ^\.\/.*$ context element ./a.js [4] ./templates ^\.\/.*$ [2] ./templates/b.js 82 [built] {0} context element ./b [4] ./templates ^\.\/.*$ context element ./b.js [4] ./templates ^\.\/.*$ [3] ./templates/c.js 82 [built] {0} context element ./c [4] ./templates ^\.\/.*$ context element ./c.js [4] ./templates ^\.\/.*$ [4] ./templates ^\.\/.*$ 217 [built] {0} cjs require context ./templates [0] ./example.js 2:8-44 ``` # Code Splitting See [this example combined with code splitting](../code-splitted-require.context)