Including this in a module will allow require([modules], function) to be used from a browser

window['require'] = function(modules, callback) { var modulesToRequire = modules.forEach(function(module) { switch(module) { case 'immutable': return require('immutable'); case 'jquery': return require('jquery'); } }) callback.apply(this, modulesToRequire); } 

Example Usage:

require(['jquery', 'immutable'], function($, immutable) { // immutable and $ are defined here }); 

Note: Each switch-statement option should either be something this module already requires, or provided by ProvidePlugin

Sources:

Based on this answer, which can be used to add an entire folder.

Alternative method from Webpack Docs - which allows something like require.yourModule.function()

I found a way that works, for both WebPack 1 and 2. (as long as the source is non-minified)

Repo: https://github.com/Venryx/webpack-runtime-require

Install

npm install --save webpack-runtime-require 

Usage

First, require the module at least once.

import "webpack-runtime-require"; 

It will then add a Require() function to the window object, for use in the console, or anywhere in your code.

Then just use it, like so:

let React = Require("react"); console.log("Retrieved React.Component: " + React.Component); 

It's not very pretty (it uses regexes to search the module wrapper functions) or fast (takes ~50ms the first call, and ~0ms after), but both of these are perfectly fine if it's just for hack-testing in the console.

Technique

The below is a trimmed version of the source to show how it works. (see the repo for the full/latest)

var WebpackData; webpackJsonp([], {123456: function(module, exports, __webpack_require__) { WebpackData = __webpack_require__; }}, [123456] ); var allModulesText; var moduleIDs = {}; function GetIDForModule(name) { if (allModulesText == null) { let moduleWrapperFuncs = Object.keys(WebpackData.m).map(moduleID=>WebpackData.m[moduleID]); allModulesText = moduleWrapperFuncs.map(a=>a.toString()).join("\n\n\n"); // these are examples of before and after webpack's transformation: (which the regex below finds the var-name of) // require("react-redux-firebase") => var _reactReduxFirebase = __webpack_require__(100); // require("./Source/MyComponent") => var _MyComponent = __webpack_require__(200); let regex = /var ([a-zA-Z_]+) = __webpack_require__\(([0-9]+)\)/g; let matches = []; let match; while (match = regex.exec(allModulesText)) matches.push(match); for (let [_, varName, id] of matches) { // these are examples of before and after the below regex's transformation: // _reactReduxFirebase => react-redux-firebase // _MyComponent => my-component // _MyComponent_New => my-component-new // _JSONHelper => json-helper let moduleName = varName .replace(/^_/g, "") // remove starting "_" .replace(new RegExp( // convert chars where: "([^_])" // is preceded by a non-underscore char + "[A-Z]" // is a capital-letter + "([^A-Z_])", // is followed by a non-capital-letter, non-underscore char "g"), str=>str[0] + "-" + str[1] + str[2] // to: "-" + char ) .replace(/_/g, "-") // convert all "_" to "-" .toLowerCase(); // convert all letters to lowercase moduleIDs[moduleName] = parseInt(id); } } return moduleIDs[name]; } function Require(name) { let id = GetIDForModule(name); return WebpackData.c[id].exports; } 

The answer from @Rene Hamburger is good but unfortunately doesn't work anymore (at least with my webpack version). So I updated it:

function getWebpackInternals() { return new Promise((resolve) => { const id = 'fakeId' + Math.random(); window['webpackJsonp'].push(["web", { [id]: function(module, __webpack_exports__, __webpack_require__) { resolve([module, __webpack_exports__, __webpack_require__]) } },[[id]]]); }); } function getModuleByExportName(moduleName) { return getWebpackInternals().then(([_, __webpack_exports__, __webpack_require__]) => { const modules = __webpack_require__.c; const moduleFound = Object.values(modules).find(module => { if (module && module.exports && module.exports[moduleName]) return true; }); if (!moduleFound) { console.log('couldnt find module ' + moduleName); return; } return moduleFound.exports[moduleName]; }) } getModuleByExportName('ExportedClassOfModule'); 

Being able to use require modules in the console is handy for debugging and code analysis. @psimyn's answer is very specific so you aren't likely to maintain that function with all the modules you might need.

When I need one of my own modules for this purpose, I assign a window property to it so I can get at it e.g window.mymodule = whatever_im_exporting;. I use the same trick to expose a system module if I want to play with it e.g:

myservice.js:

let $ = require('jquery'); let myService = {}; // local functions service props etc... module.exports = myService; // todo: remove these window prop assignments when done playing in console window.$ = $; window.myService = myService; 

It is still a bit of a pain, but digging into the bundles, I can't see any way to conveniently map over modules.

expose-loader is, in my opinion, a more elegant solution:

require("expose-loader?libraryName!./file.js"); // Exposes the exports for file.js to the global context on property "libraryName". // In web browsers, window.libraryName is then available. 

Adding the below code to one of your modules will allow you to load modules by id.

window.require = __webpack_require__; 

In the console use the following:

require(34) 

You could do something similar as psimyn advised by adding following code to some module in bundle:

require.ensure([], function () { window.require = function (module) { return require(module); }; }); 

Use require from console:

require("./app").doSomething(); 

See more

After making an npm module for this (see my other answer), I did a search on npms.io and seem to have found an existing webpack-plugin available for this purpose.

Repo: https://www.npmjs.com/package/webpack-expose-require-plugin

Install

npm install --save webpack-expose-require-plugin 

Usage

Add the plugin to your webpack config, then use at runtime like so:

let MyComponent = require.main("./path/to/MyComponent"); console.log("Retrieved MyComponent: " + MyComponent); 

See package/repo readme page for more info.

EDIT

I tried the plugin out in my own project, but couldn't get it to work; I kept getting the error: Cannot read property 'resource' of undefined. I'll leave it here in case it works for other people, though. (I'm currently using the solution mentioned above instead)

After both making my own npm package for this (see here), as well as finding an existing one (see here), I also found a way to do it in one-line just using the built-in webpack functions.

It uses WebPack "contexts": https://webpack.github.io/docs/context.html

Just add the following line to a file directly in your "Source" folder:

window.Require = require.context("./", true, /\.js$/); 

Now you can use it (eg. in the console) like so:

let MyComponent = Require("./Path/To/MyComponent"); console.log("Retrieved MyComponent: " + MyComponent); 

However, one important drawback of this approach, as compared to the two solutions mentioned above, is that it seems to not work for files in the node_modules folder. When the path is adjusted to "../", webpack fails to compile -- at least in my project. (perhaps because the node_modules folder is just so massive)

Base on daymannovaes's answer, simplify on several lines

// type this in console to retrieve cached module, or dynamic load it (webpackJsonp.__webpack_require__ || await new Promise((resolve) => { const chunkId = 1, id = `fakeId${+new Date}`; webpackJsonp.push([chunkId, {[id](...args) { resolve(webpackJsonp.__webpack_require__ = args[2]) }}, [[id]]]); }))('exportedModuleId') 

You must find out what installedChunks are, in most cases, you can simply using 1 as chunk id

Since bugs in Safari, it is not works in safari dev console, here is the version without top-level await

Promise.resolve(webpackJsonp.__webpack_require__ || new Promise((resolve) => { const chunkId = 1, id = `fakeId${+new Date}`; webpackJsonp.push([chunkId, {[id](...args) { resolve(webpackJsonp.__webpack_require__ = args[2]) }}, [[id]]]); })).then(__webpack_require__ => { const loadedModule = __webpack_require__('exportedModuleId'); console.log(`Loaded: ${loadedModule}`); });