webpack/examples/require.context/README.md

example.js

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:

module.exports = function() {
	return "This text was generated by template X";
}

js/output.js

(function(modules) { // webpackBootstrap
// The module cache
var installedModules = {};

// The require function
function require(moduleId) {
	// Check if module is in cache
	if(installedModules[moduleId])
		return installedModules[moduleId].exports;
	
	// Create a new module (and put it into the cache)
	var module = installedModules[moduleId] = {
		exports: {},
		id: moduleId,
		loaded: false
	};
	
	// Execute the module function
	modules[moduleId].call(null, module, module.exports, require);
	
	// Flag the module as loaded
	module.loaded = true;
	
	// Return the exports of the module
	return module.exports;
}

require.e = function requireEnsure(_, callback) {
	callback.call(null, require);
};
require.modules = modules;
require.cache = installedModules;


// Load entry module and return exports
return require(0);
})
/************************************************************************/
({
// __webpack_public_path__

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: 6de61529e12c5c59a06afb519b285fc6
Version: webpack 0.10.0-beta1
Time: 39ms
    Asset  Size  Chunks  Chunk Names
output.js  2586       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: 6de61529e12c5c59a06afb519b285fc6
Version: webpack 0.10.0-beta1
Time: 114ms
    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