Aquí hay otra forma más genérica de hacer esto.

Requerir un módulo por ID

La versión actual de WebPack expone webpackJsonp(...) , que se puede usar para solicitar un módulo por ID:

 function _requireById(id) { return webpackJsonp([], null, [id]); }

o en mecanografiado

 window['_requireById'] = (id: number): any => window['webpackJsonp'];([], null, [id]);

El ID es visible en la parte superior del módulo en el archivo incluido o en el pie de página del archivo de origen original que se sirve a través de los mapas de origen.

Requerir un módulo por nombre

Requerir un módulo por nombre es mucho más complicado, ya que WebPack no parece mantener ninguna referencia a la ruta del módulo una vez que ha procesado todas las fuentes. Pero el siguiente código parece funcionar en muchos de los casos:

 /** * Returns a promise that resolves to the result of a case-sensitive search * for a module or one of its exports. `makeGlobal` can be set to true * or to the name of the window property it should be saved as. * Example usage: * _requireByName('jQuery', '$'); * _requireByName('Observable', true)´; */ window['_requireByName'] = (name: string, makeGlobal?: (string|boolean)): Promise<any> => getAllModules() .then((modules) => { let returnMember; let module = _.find<any, any>(modules, (module) => { if (_.isObject(module.exports) && name in module.exports) { returnMember = true; return true; } else if (_.isFunction(module.exports) && module.exports.name === name) { return true; } }); if (module) { module = returnMember ? module.exports[name] : module.exports; if (makeGlobal) { const moduleName = makeGlobal === true ? name : makeGlobal as string; window[moduleName] = module; console.log(`Module or module export saved as 'window.${moduleName}':`, module); } else { console.log(`Module or module export 'name' found:`, module); } return module; } console.warn(`Module or module export '${name}'' could not be found`); return null; }); // Returns promise that resolves to all installed modules function getAllModules() { return new Promise((resolve) => { const id = _.uniqueId('fakeModule_'); window['webpackJsonp']( [], {[id]: function(module, exports, __webpack_require__) { resolve(__webpack_require__.c); }}, [id] ); }); }

Este es un primer intento rápido, ¡así que todo se puede mejorar!

Incluir esto en un módulo permitirá que require([modules], function) se use desde un navegador

 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); }

Ejemplo de uso:

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

Nota: Cada opción de declaración de cambio debe ser algo que este módulo ya requiera o proporcionado por ProvidePlugin

Fuentes:

Basado en esta respuesta , que se puede usar para agregar una carpeta completa.

Método alternativo de Webpack Docs , que permite algo como require.yourModule.function()

Encontré una forma que funciona, tanto para WebPack 1 como para 2. (siempre y cuando la fuente no esté minificada)

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

Instalar

 npm install --save webpack-runtime-require

Uso

Primero, requiere el módulo al menos una vez.

 import "webpack-runtime-require";

Luego agregará una función Require() al objeto de la ventana, para usar en la consola o en cualquier parte de su código.

Entonces solo úsalo, así:

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

No es muy bonito (usa expresiones regulares para buscar las funciones de envoltorio del módulo) o rápido (toma ~50ms la primera llamada y ~0ms después), pero ambos están perfectamente bien si es solo para pruebas de piratería en la consola.

Técnica

La siguiente es una versión recortada de la fuente para mostrar cómo funciona. (ver el repositorio para el completo/más reciente)

 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 + "[AZ]" // 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; }