webpack/examples/require.context

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) {
/******/	var installedModules = {};
/******/	function require(moduleId) {
/******/		if(typeof moduleId !== "number") throw new Error("Cannot find module '"+moduleId+"'");
/******/		if(installedModules[moduleId])
/******/			return installedModules[moduleId].exports;
/******/		var module = installedModules[moduleId] = {
/******/			exports: {}
/******/		};
/******/		modules[moduleId](module, module.exports, require);
/******/		return module.exports;
/******/	}
/******/	require.ensure = function(chunkId, callback) {
/******/		callback(require);
/******/	};
/******/	return require(0);
/******/})
/******/({
/******/0: function(module, exports, require) {

function getTemplate(templateName) {
	return require(/* ./templates */2)("./"+templateName);
}
require(/* __webpack_console */1).log(getTemplate("a"));
require(/* __webpack_console */1).log(getTemplate("b"));

/******/},
/******/
/******/1: function(module, exports, require) {

var console = window.console;
exports.log = (console && console.log) || function() {};
exports.info = (console && console.info) || function() {};
exports.error = (console && console.error) || function() {};
exports.warn = (console && console.warn) || function() {};
exports.dir = (console && console.dir) || function() {};
exports.time = (console && console.time) || function(label) {
	times[label] = Date.now();
};
exports.timeEnd = (console && console.timeEnd) || function() {
	var duration = Date.now() - times[label];
	exports.log('%s: %dms', label, duration);
};
exports.trace = (console && console.trace) || function() {};
exports.assert = (console && console.assert) || function() {};

/******/},
/******/
/******/2: function(module, exports, require) {

/***/module.exports = function(name) {
/***/	var map = {"./a.js":3,"./b.js":5,"./c.js":4};
/***/	return require(map[name]||map[name+".web.js"]||map[name+".js"]||name);
/***/};

/******/},
/******/
/******/3: function(module, exports, require) {

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

/******/},
/******/
/******/4: function(module, exports, require) {

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

/******/},
/******/
/******/5: function(module, exports, require) {

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

/******/},
/******/
/******/})

Info

Uncompressed

Chunks: 1
Modules: 6
Modules including duplicates: 6
Modules pre chunk: 6
Modules first chunk: 6
     output.js:     2402 characters
output.js
    0 [...]\examples\require.context\example.js
       main
    1 [...]\buildin\__webpack_console.js
       require (2x) from [...]\examples\require.context\example.js
    2 generated [...]\examples\require.context\templates
       context from [...]\examples\require.context\example.js
    3 [...]\examples\require.context\templates\a.js
       context from [...]\examples\require.context\example.js
    4 [...]\examples\require.context\templates\c.js
       context from [...]\examples\require.context\example.js
    5 [...]\examples\require.context\templates\b.js
       context from [...]\examples\require.context\example.js

Minimized (uglify-js, no zip)

Chunks: 1
Modules: 6
Modules including duplicates: 6
Modules pre chunk: 6
Modules first chunk: 6
     output.js:     1119 characters
output.js
    0 [...]\examples\require.context\example.js
       main
    1 generated [...]\examples\require.context\templates
       context from [...]\examples\require.context\example.js
    2 [...]\examples\require.context\templates\a.js
       context from [...]\examples\require.context\example.js
    3 [...]\examples\require.context\templates\b.js
       context from [...]\examples\require.context\example.js
    4 [...]\examples\require.context\templates\c.js
       context from [...]\examples\require.context\example.js
    5 [...]\buildin\__webpack_console.js
       require (2x) from [...]\examples\require.context\example.js

Code Splitting

See this example combined with code splitting